码迷,mamicode.com
首页 > Web开发 > 详细

原生js写轮播图效果

时间:2018-03-17 19:45:23      阅读:294      评论:0      收藏:0      [点我收藏+]

标签:back   col   content   切换   style   图片   blog   elements   全局   

<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写轮播图效果

标签:back   col   content   切换   style   图片   blog   elements   全局   

原文地址:https://www.cnblogs.com/zjingjing/p/8591933.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!