原生js写轮播图效果

Posted 2020-10-27 薄荷凉凉凉

<script>

            var picarr=[
                "pic/lb1.jpg",
                "pic/lb2.jpg",
                "pic/lb3.jpg",
                "pic/lb4.jpg"
            ];

            //全局变量index控制当前所在第几张图片
            var index=0;
            var timer;
            var radiobtn= document.getElementsByClassName("tubiao")[0].getElementsByTagName("span");

            function  autochang(index) {
                var index=parseInt(index);
                document.getElementsByClassName("content_1")[0].style.backgroundImage="url("+picarr[index]+")";
                for(var j=0;j<radiobtn.length;j++){
                    radiobtn[j].className="";
                }
                radiobtn[index].className="actived";  
            }


            function change(index){
                setInterval("autochang((index++)%radiobtn.length);",3000);
            }

            //页面加载成功初始效果
            change(index);


             
            //当鼠标点击点点的时候切换效果
              for(var i=0;i<radiobtn.length;i++){ 
               radiobtn[i].index = i;
                radiobtn[i].onclick=function () {
                    clearInterval(timer);
                   autochang(this.index);
                   index=this.index;
                }
             }

             //点击左箭头
             document.getElementsByClassName("left_jiantou")[0].onclick=function(){
                 index--;
                 if(index<0){
                     index=radiobtn.length-1;
                 }
                 autochang(index);
             }

             //点击右箭头
             document.getElementsByClassName("right_jiantou")[0].onclick=function(){
                 index++;
                 if(index>=radiobtn.length){
                     index=0;
                 }
                 autochang(index);
             }
    </script>