轮播图完整版实例
- 代码：
- 执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图完整版实例</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } .wrap{ width: 750px; height: 292px; margin: 30px auto; position: relative; background: url("image1/7.png") center no-repeat lightslategray; background-size: contain; overflow: hidden; } .wrap .boxbanner{ position: absolute; left: 0; top: 0; width: 3000px; height: 292px; } .wrap .boxbanner img{ float: left; width: 750px; height: 292px; vertical-align: middle; } .wrap ul{ position: absolute; width: 140px; left: 50%; margin-left: -70px; bottom: 10px; } .wrap ul li{ width: 20px; height: 20px; border-radius: 50%; background-color: lightslategray; float: left; cursor: pointer; } .wrap ul li+li{ margin-left: 20px; } .wrap ul li.active{ background-color: orangered; } .wrap a{ position: absolute; width: 43px; height: 67px; top:50%; margin-top: -30px; background-image: url("image1/6.png"); background-repeat: no-repeat; opacity: 0.5; filter: alpha(opacity=50); display: none; } .wrap a.Left{ left: 10px; background-position: 0 0; } .wrap a.Right{ right: 10px; background-position: -63px 0; } .wrap a:hover{ opacity: 1; filter: alpha(opacity=100); } </style> </head> <body> <div class="wrap"> <div class="boxbanner"> <!--<img src="image1/1.jpg" alt=""> <img src="image1/2.jpg" alt=""> <img src="image1/3.jpg" alt=""> <img src="image1/4.jpg" alt="">--> </div> <ul> <!--<li class="active"></li> <li></li> <li></li> <li></li>--> </ul> <a href="javascript:void(0);" class="Left"></a> <a href="javascript:void(0);" class="Right"></a> </div> <script src="js/utils.js"></script> <script src="js/moveEffect.js"></script> <script src="js/animatSuper.js"></script> <script src="js/banner1.js"></script> </body> </html>- JS代码：
//获取元素 var oWrap=utils.getByClass("wrap")[0]; var boxBanner=utils.getByClass("boxbanner",oWrap)[0]; var oUl=oWrap.getElementsByTagName("ul")[0]; var bLeft=utils.getByClass("Left",oWrap)[0]; var bRight=utils.getByClass("Right",oWrap)[0]; var aImg=boxBanner.getElementsByTagName("img"); var aLi=oUl.getElementsByTagName("li"); var data=null; //获取后台数据 getData(); function getData() { var xml=new XMLHttpRequest(); xml.open("GET","ajax/data.txt",false);//获取数据时以html文件位置为主； xml.onreadystatechange=function () { if(xml.readyState==4 && /^2\d{2}$/.test(xml.status)){ data=utils.jsonParse(xml.responseText); } }; xml.send(null); } //绑定数据 domSert(); function domSert() { var str=""; var sli=""; for(var i=0; i<data.length; i++){ str+=`<img src="" realImg="${data[i].imgSrc}" alt="">`; sli+=i==0? '<li class="active"></li>': "<li></li>"; } str+=`<img src="" realImg="${data[0].imgSrc}" alt="">`; boxBanner.innerHTML=str; //重新设置boxBanner的宽度 boxBanner.style.width=aImg[0].offsetWidth*aImg.length+"px"; oUl.innerHTML=sli; //重新设置ul的宽及margin-left值 oUl.style.width=aLi[0].offsetWidth*aLi.length+utils.getCss(aLi[1],"marginLeft")*(aLi.length-1)+"px"; oUl.style.marginLeft=-oUl.offsetWidth/2+"px"; } //图片懒加载 showImg(); function showImg() { for(var i=0; i<aImg.length; i++){ lazyImg(aImg[i]); } } function lazyImg(img) { if(img.loaded) return; var imgFrg=new Image(); imgFrg.src=img.getAttribute("realImg"); imgFrg.onload=function () { img.src=this.src; imgFrg=null; img.loaded=true; }; imgFrg.onerror=function () { alert("图片懒加载失败"); imgFrg=null; img.loaded=true; } } //进行轮播图设置 //创建全局变量n var n=0; //自动轮播图设置 var timer=setInterval(autoMove,3000); //运动过程 function autoMove() { //边界点判断 if(n>=aImg.length-1){ n=0; boxBanner.style.left=-n*750+"px"; } n++; //boxBanner.style.left=-n*750+"px"; //n的值为1,2,3,4,1,2,3,4依次循环 animate({ ele:boxBanner, duration: 700, effect: 0, target:{ left: -n*750 } }); bannerTip(); } //焦点跟随 function bannerTip() { for(var i=0; i<aLi.length; i++){ aLi[i].className=i==n%aLi.length?"active":null; /*if(i==n%aLi.length){ aLi[i].className="active"; }else{ aLi[i].className=null; }*/ } } //鼠标移入停止，鼠标移出继续 oWrap.onmouseover=function () { clearInterval(timer); bLeft.style.display=bRight.style.display="block"; }; oWrap.onmouseout=function () { timer=setInterval(autoMove,2000); bLeft.style.display=bRight.style.display="none"; }; //焦点点击图片切换 handleChange(); function handleChange() { for(var i=0; i<aLi.length; i++){ (function (index) { aLi[index].onclick=function () { n=index-1; autoMove(); } })(i); } } //点击左右按钮切换 bLeft.onclick=function () { if(n<=0){ n=aImg.length-1; boxBanner.style.left=-n*750+"px"; } n--; animate({ ele:boxBanner, duration: 700, effect: 0, target:{ left: -n*750 } }); bannerTip(); }; bRight.onclick=autoMove;
网友评论