window.onload=function(){//页面加载完成后 slidellx("slide");//参数为字符串是外层容器的id,可以多次调用 slidellx("slide_two"); //方法 function slidellx(slideid){ var slide=document.getelementbyid(slideid);//容器 var slidelis=slide.getelementsbytagname('li'); var conut=slidelis.length;//实际图片数量 if(conut<2){ return false;//如果图片数量少于2就不开启轮播节约资源 } var imgs=slide.getelementsbytagname("img"); var firstsrc=imgs[0].getattribute("src");//第一张图的路径 var lastsrc=imgs[imgs.length-1].getattribute("src");//最后一张图的路径 var offset=slide.clientwidth;//每次滚动的距离 var index=1;//当前是第一张图 var slideul=slide.getelementsbytagname("ul")[0];//ul var timer;//自动轮播定时器对象 //开头插入最后一张图 var firstli=document.createelement("li"); var firstimg=document.createelement("img"); firstimg.setattribute("src",lastsrc); firstli.appendchild(firstimg); slideul.insertbefore(firstli,slideul.firstchild);//创建li并插入最后一张图的路径添加第一张图之前 slideul.style.transform="translatex("+(-offset)+"px)";//ul滚动到第一张图的位置 //末尾插入第一张图 var lastli=document.createelement("li"); var lastimg=document.createelement("img"); lastimg.setattribute("src",firstsrc); lastli.appendchild(lastimg); slideul.appendchild(lastli); //创建圆点控制按钮 var circle_btn=document.createelement("div"); circle_btn.setattribute("class","circle_btn"); for(var i=0;iconut){ index=1; beactive(circles[index-1]); settimeout(function(){ closetransition(); goslide(); },600) }else{ beactive(circles[index-1]); } } //定时器自动轮播 openautoslide();//默认开启自动轮播 function openautoslide(){ if(timer){ window.clearinterval(timer); } timer=setinterval(function(){ beactive(circles[index-1]); btn_next.onclick(); },6000)//轮播间隔时间 } //暂停自动轮播,并且在6秒后再次开始轮播 function closeautoslide(){ window.clearinterval(timer); settimeout(function(){ openautoslide(); },6000);//暂停后再次开始的时间 } //用户操作时暂停自动 btn_next.onmousedown=function(){ closeautoslide(); } btn_prev.onmousedown=function(){ closeautoslide(); } //为圆点添加高亮,高亮效果可以去修改对应的css function beactive(btn){ circle_btn.getelementsbyclassname("active")[0].setattribute("class",""); btn.setattribute("class","active"); } //打开过渡效果 function opentransition(){ slideul.style.transition="all .6s";//完成动画的时间为600毫秒如果更改这里请把上面的600也相应的修改 } //关闭过渡效果 function closetransition(){ slideul.style.transition="none"; } //滚动到index相应的位置 function goslide(){ slideul.style.transform="translatex(-"+index*offset+"px)"; } //响应式,根据浏览器窗口变化 slideul.style.width=slidelis.length*100+"%"; var liwidth=100/slidelis.length+"%"; for(var i=0;i