第八周第四天笔记之轮播图实例完整版

2018-09-11 本文已影响0人果木山

轮播图完整版实例

代码：

执行代码：

 <!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;

第八周第四天笔记之轮播图实例完整版

轮播图完整版实例

猜你喜欢

热点阅读