首页 > 代码库 > js实现轮播图

js实现轮播图

<!---图片放在ul中--->
<
ul class="tup"> <li class="lis"><img src="img/wqe.jpg" class="zuimg"></li> <li class="lis"><img src="img/zxc.jpg" class="zuimg"></li> <li class="lis"><img src="img/qwe.jpg" class="zuimg"></li> </ul> <!-----这里放的是圆点-------> <div id="sdcontrolbtm"> <a class="controlitem actitem" href="#"></a> <a class="controlitem" href="#"></a> <a class="controlitem" href="#"></a> </div> <!----这里放的控制按钮-----> <div class="xstp-a">  <span class="xstp-a-s a-s-vs">></span> <span class="xstp-a-s a-s-v"><</span> </div>
/*这里放的是css代码*/   
body,.tup,.lis
{ margin:0; padding:0; list-style:none; /*取消li前面的圆点*/ } .lis{ width:100%; height:100%; position:absolute; opacity:0; /*设置透明度为0,也就是不显示*/ transition:1s; /*动画时间为1秒*/ } .lis:first-child{ opacity:1; }
<script>
    $(function(){
            var li = $(".lis"); /*获取图片集合*/
            var index = 0;   
        $(".a-s-vs").click(function(){
                index++;
                if(index == li.length){
                    index = 0;
                }
                
                for(var i=0; i< li.length; i++){
                    li[i].style.opacity = 0;
                }
                li[index].style.opacity = 1;
                $("#sdcontrolbtm a").eq(index).addClass(‘actitem‘).siblings().removeClass(‘actitem‘);
        })
        $(".a-s-v").click(function(){
               index--;
                if(index == -1){
                    index = li.length -1;
                }
                console.log(index);
                for(var i=0; i< li.length; i++){
                    li[i].style.opacity = 0;
                }
                li[index].style.opacity = 1;
                $("#sdcontrolbtm a").eq(index).addClass(‘actitem‘).siblings().removeClass(‘actitem‘);
        })
        $(".controlitem").click(function(){
        })
        $("#sdcontrolbtm a").mousemove(function(){
              var index = $(this).index();
               for(var i=0; i< li.length; i++){
                 li[i].style.opacity = 0;
               }
               li[index].style.opacity = 1;
              $(this).addClass(‘actitem‘).siblings().removeClass(‘actitem‘);
        })
    })
</script>

 

js实现轮播图