Js图片点击切换轮播实现代码

PHP中文网 • 2025年3月7日 23:33:42 • 编程技术 • 阅读 2

nbsp;html>                     window.onload=function(){        var btn1=document.getElementById("pre");        var btn2=document.getElementById("next");        var img=document.getElementById("img1");        var imgarr=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg"];        var index=0;        var info=document.getElementById("pd");          info.innerHTML="一共"+imgarr.length+"张 图片 ，当前 第"+(index+1)+"张";                btn1.onclick=function(){            index--;          if(indeximgarr.length-1){            index=0;          }          img.src=imgarr[in000dex];          info.innerHTML="一共"+imgarr.length+"张 图片 ，当前 第"+(index+1)+"张";        };      };              *{        padding: 0;        margin:0;      }      .outer{        width:640px;        height:453px;        margin:100px auto;                text-align: center;      }

登录后复制

实现效果

轮播

nbsp;html>                    *{        padding:0px;        margin: 0px;      }            #outer{        position: relative;        width:660px;        height:425px;        margin:50px auto ;        background:yellow;        padding:10px 0;        overflow: hidden;      }      #imglist{        position: absolute;        list-style: none;        /*         * 设置偏移量         *          *          */        left:0px;             }      #imglist li{        margin: 0 10px;        float:left;      }            #navp{        position: absolute;        bottom: 15px;        /*         * 设置left值         * outer宽度 640         * navp宽度 30*5=125         * 640-125=515         * 515/2=257.5         * left:257.5px;         */        left:0;              }      #navp a{        float:left;        width:20px;        height:20px;        background:#ff1;        opacity: 0.5;        /*兼容IE8的透明*/        filter:alpha(opacity=50);        margin: 0 5px;      }      #navp a:hover{        background:red;      }                      window.onload=function(){        var imglist=document.getElementById("imglist");        var navp=document.getElementById("navp");        var outer=document.getElementById("outer");        //获取页面所有的img标签        var imgarr=document.getElementsByTagName("img");        //获取页面所有的A标签        var allA=document.getElementsByTagName("a");        //默认显示图片的索引        var index=0;         //设置        allA[index].style.background="black";        //设置ul的长度        imglist.style.width=660*imgarr.length+"px";        //设置navp的left值        navp.style.left=(outer.offsetWidth-navp.offsetWidth)/2+"px";               //定义一个定时器标识        var timer;                //点击超链接切换到指定的图片        //为所有的超链接绑定单击响应函数        for(var i=0;i=imgarr.length-1){            index=0;                      //如果是最后一张，就把imglist移到0          imglist.style.left=0+"px";          }          for(var j=0;j<allA.length;j++){            //去掉内联样式，只剩下样式表的样式            allA[j].style.background="";          }                    allA[index].style.background="black";                  };                 function autoChange(){          timer=setInterval(function(){            index++;            index%=imgarr.length;            move(imglist,20,-660*index,"left",function(){            setA();            });          },3000);        };       };

登录后复制

tools.js

//动画函数        /*参数         * -1.obj 对象         * -2.speed 速度         * -3.target 执行动画的目标         * -4.arrt 要变化的样式         * -5.callback:回调函数 将会在动画执行完后执行         */              function move(obj,speed,target,arrt,callback){          //关闭上一次定时器            clearTimeout(obj.timer);            //判断速度的正负值            //如果从0向800移动则为正            //如果从800向0移动则为负            var current=parseInt(getStyle(obj,arrt));            if(current>target){              speed=-speed;            }            //开启一个定时器            //为obj添加一个timer属性，用来保存它1自己的定时器的标识            obj.timer=setInterval(function(){                          //获取原来的left值            var oldvalue=parseInt(getStyle(obj,arrt));            //在旧值的基础上增加            var newvalue=oldvalue+speed;            if(speed0&&newvalue>target)            {              newvalue=target;            }            obj.style[arrt]=newvalue+"px";            //当元素到达target关闭定时器            if(newvalue===target||newvalue===target){            clearTimeout(obj.timer);            //动画执行完 执行函数            callback&&callback();          }                  },30);        };

登录后复制

实现效果