一、只能使用一次的轮播图

原理：通过点击元素prev与next元素，来移动scrol图片容器的left

结构

     
    
      
        
       
            
        
                
                         
                         
                     
        
    
       
    
       <    
       >    
      
     
     

样式

.desigList .desigListRight{
       float: left;    width: 714px;    padding: 38px 34px 50px 47px;}.desigList .desigListRight .desigCarousel{
       width: 684px;    height: 192px;    margin: 0 0 0 -45px;    position: relative;    padding:0 65px;}.desigList .desigListRight .desigCarousel .desigCar{
       position: relative;    height: 192px;    overflow: hidden;    width: 644px;}.desigList .desigListRight .desigCarousel .scrol{
       width: 1392px;    height: 192px;    position: absolute;}.desigList .desigListRight .desigCarousel img{
       float:left;    margin: 0 24px 0 0;}.desigList .desigListRight .desigCarousel .btns{
       display: block;    width: 32px;    height: 32px;    font-size: 40px;    line-height: 40px;    color: #c3c3c3;    position: absolute;    top:50%;    margin: -16px 0 0 0;    text-align: center;    cursor: pointer;}.desigList .desigListRight .desigCarousel .left{
       left:15px!important;}.desigList .desigListRight .desigCarousel .right{
       right:38px;}

javaScript脚本

1 var scroll = document.getElementById('scrol'), 2     prev = document.getElementById('left'), 3     next = document.getElementById('right'), 4     timer = null; 5  6 scroll.innerHTML += scroll.innerHTML; 7  8 function animate(shiftingDistance){ 9     scroll.style.left = parseInt(scroll.style.left) + shiftingDistance + 'px';10     if(parseInt(scroll.style.left) > 0){11         scroll.style.left = "-928px";12     }13     if(parseInt(scroll.style.left) < -696){14         scroll.style.left = "-464px";15     }16 }17  18 prev.onclick = function(){19     animate(232);20 }21 next.onclick = function(){22     animate(-232);23 }

 

二、可以使用多次的轮播图

css样式不变,html结构的id全部去掉变成class

下面是javaScript脚本

1 var scroll = document.getElementsByClassName('scrol'), 2     prev = document.getElementsByClassName('left'), 3     next = document.getElementsByClassName('right'); 4  5 for(var i = 0; i < scroll.length; i++) { 6     scrollBar(scroll[i], prev[i], next[i]); 7 } 8  9 function scrollBar(scroll, prev, next) {10     var timer = null;11 12     scroll.innerHTML += scroll.innerHTML;13     function animate(shiftingDistance){14         scroll.style.left = parseInt(scroll.style.left) + shiftingDistance + 'px';15         16         if(parseInt(scroll.style.left) > 0){17             scroll.style.left = "-928px";18         }19 20         if(parseInt(scroll.style.left) < -696){21             scroll.style.left = "-464px";22         }23     }24     prev.onclick = function(){25         animate(scroll, 232);26     }27     next.onclick = function(){28         animate(scroll, -232);29     }30 }

在使用多个相同的轮播图时，为了找到对应的类名我们可以通过循环来解决

1 var scrol = document.getElementsByClassName('scrol'); 2       left = document.getElementsByClassName('left');  3 for(var i=0; i