原生js写轮播图效果

Posted 薄荷凉凉凉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生js写轮播图效果相关的知识,希望对你有一定的参考价值。

<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>

 

以上是关于原生js写轮播图效果的主要内容,如果未能解决你的问题,请参考以下文章

原生JS写轮播图(转自https://www.cnblogs.com/LIUYANZUO/p/5679753.html)

JavaScript实现轮播图效果

原生js-实现轮播图效果

js原生 JavaScript轮播图渐变淡入淡出效果实现(附代码)

怎么用jquery做轮播图效果

原生js封装轮播图