js案例--轮播图

css.css

*{padding: 0px;margin: 0px;}
ul,li{list-style: none;}
.clear{clear:both;}

.imgs{
   position: relative;
   width: 800px;
   height: 360px;
   margin: 45px auto;
}
.imgs img{
   width: 100%;
   height: 360px;
}
.imgs .btn{
   position: absolute;
   z-index: 999;
   width: 60px;
   height: 100px;
   background: rgba(0,0,0,0.4);
   color:rgba(255,255,255,0.4);
   top: 130px;
   text-align: center;
   line-height: 100px;
   font-size: 24px;
   transition: all 0.3s;
   opacity: 0;
}
.imgs:hover .btn{
   opacity: 1;
}
.imgs .next{
   right: 0px;
}
.imgs ul{
   overflow: hidden;
   width: 800px;
   height: 360px;
   position: relative;
}
.imgs ul li{
   position: absolute;
   top: 0px;
   left: 100%;
   width: 100%;
}
.imgs ul li:first-child{
   left: 0px;
}

js.js

$(document).ready(function(){

    //点击图片向左移动
    var obj = $('.imgs ul li');//获取li节点对象
    var setTime = 2000; //自动播放间隔时间
    var aniTime = 200; //动画时间
    var index = 0; //当前图片下标
    $('.imgs .pre').click(function(event) {
        scrollLeft(obj,index,aniTime);
    });
    //点击图片向右移动
    $('.imgs .next').click(function(event) {
        //获取当前显示图片的下标
        for(var i=0;i             if(parseInt(obj.eq(i).css('left'))==0){
                index=i;
            }
        }
        //把当前不显示的图片全部移到右侧
        obj.css('left','-100%');
        obj.eq(index).css('left','0px');
        if(index-1>0){
            obj.eq(index).animate({left:'100%'}, aniTime);
            obj.eq(index-1).animate({left:'0px'}, aniTime);
        }else{
            obj.eq(index).animate({left:'100%'}, aniTime);
            index=obj.length-1;
            obj.eq(index).animate({left:'0px'}, aniTime);
        }
    });
    //自动滚动
    var setAni = setInterval(scrollLeft,setTime,obj,index,aniTime);
    $('.imgs').mouseover(function(event) {
        clearInterval(setAni);
    });
    $('.imgs').mouseout(function(event) {
        setAni = setInterval(scrollLeft,setTime,obj,index,aniTime);
    });
})
// 自动滚动
function scrollLeft(obj,index,aniTime){
    //获取当前显示图片的下标
    for(var i=0;i         if(parseInt(obj.eq(i).css('left'))==0){
            index=i;
        }
    }
    //把当前不显示的图片全部移到右侧
    obj.css('left','100%');
    obj.eq(index).css('left','0px');
    if(index+1         obj.eq(index).animate({left:'-100%'}, aniTime);
        obj.eq(index+1).animate({left:'0px'}, aniTime);
    }else{
        obj.eq(index).animate({left:'-100%'}, aniTime);
        index=0;
        obj.eq(index).animate({left:'0px'}, aniTime);
    }
}

index.html

    
    
    
    
    


    

        

<-

        

->

        

            
• 

            
• 

            
• 

            
• 

            
•