輪播圖

1、只能使用一次的輪播圖

原理：經過點擊元素prev與next元素，來移動scrol圖片容器的left

結構

<div class="desigListRight">
    <div class="desigCarousel">
        <div class="desigCar">
            <div id="scrol" class="scrol" style="left:0">
                <img src="images/desig001.jpg" alt="desig001">
                <img src="images/desig002.jpg" alt="desig002">
                <img src="images/desig003.jpg" alt="desig003">
            </div>
    </div>


    <a id="left" class="btns left">&lt;</a>
    <a id="right" class="btns right">&gt;</a>
    </div>
</div><!--/desigListRight-->

樣式

.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 }

 

2、可使用屢次的輪播圖

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<scrol.length; i++){
 4       getClass(scrol[i],left[i]);
 5 }
 6 
 7 function getClass(scrol,left){
 8         // 能夠獲取到對應的class    
 9         console.log(scrol);
10         console.log(left);
11 }