轮播图完整版实例

• 代码：
  • 执行代码：

  *{ 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); }

  
  
  • 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=https://www.it610.com/article/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=https://www.it610.com/article/utils.jsonParse(xml.responseText); } }; xml.send(null); } //绑定数据 domSert(); function domSert() { var str=""; var sli=""; for(var i=0; i
  文章图片
  `; sli+=i==0? '

  ': "

  "; } str+=`
  文章图片
  `; 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-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