轮播图

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

原理：通过点击元素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 }

 

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

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 }

 

posted on 2015-08-20 13:13  蜗牛nice  阅读(173)  评论(0)  编辑  收藏  举报

导航