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>