javaScript中的原生图片轮播

图片轮播在网站上面是经常看见的，是为了展示广告宣传的；图片的轮播应该考虑到鼠标移入和移除的事件，定时器时间的设置给观众有更多的时间来观看，图片的滚动动效；原生js写的图片轮播，滚动的图片是4张，但是在图片div的容器里面放着5张图片，有两张一样的，防止在滚动到最后一张的时候出现空白，利用肉眼的误差，当出现第五张，也就是第一张图片的时候，立马重新的把拉回，从第一张显示

html代码

轮播图的组成三个东西，图片，焦点，左右按钮；这三个都是兄弟的关系排列，都是处在一个大容器的里面，作为一个整体

<div class='wrap'>
// 图片盒子
  <div class=' imgBox'>
    ![](img/banner1.jpg)
    ![](img/banner2.jpg)
    ![](img/banner3.jpg)
    ![](img/banner4.jpg)
  </div>
// 图片焦点
   <ul>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
 // 左右翻页箭头  href="javascript:;" 取消其点击的效果
 <a href="javascript:;" class="left"></a>
 <a href="javascript:;" class="right"></a>
</div> 

CSS代码

外容器没有设置宽高的时候，其宽高取决于里面子元素的宽高

 *{
     margin:0;
     padding:0;
     list-style: none;
  }
  .wrap{
         width: 1000px;
         height:340px;
         position: relative; // 总容器作为定位的参照物
         margin:30px auto;
         overflow: hidden;
      }
   .wrap .boxImg{
         width:4000px; // 因为其宽度足够包裹里面的img，所以不需要清除浮动
         position: absolute;// 相当于外容器定位
         left:0;
         top:0;
      }
 .wrap .boxImg img{
            float: left; // 浮动，排列成一排
            width:1000px;
            height:340px;
        }
        // 焦点的样式
        .wrap ul{
        // ul脱离的文档流，而里面的子元素li浮动起来也脱离了文档流，故ul还是可以包裹li
            position: absolute;
            right:30px;
            bottom:30px;
        }
        .wrap ul li{
            width:20px;
            height:20px;
            border-radius: 50%;
            background: #ccc;
            float: left;
            margin-left: 10px;
        }
        .wrap ul li.active{
            background: red;
        }
        .wrap a{
            width: 30px;
            height: 46px;
            position: absolute;
            top:50%;
            margin-top:-23px;
            background-image: url("img/pre.png");
            background-repeat: no-repeat;
            opacity: 0.5;
            filter: alpha(opacity:50); // 兼容IE浏览器的透明度
            display: none;
        }
        .wrap a:hover{
            opacity: 1;
            filter: alpha(opacity:100);
        }
        .wrap a.left{
            left:30px;
            background-position: 0 0;
        }
        .wrap a.right{
            right:30px;
            background-position: -50px 0;
        }

js代码

首先分为几个部分：图片轮播，焦点轮播，鼠标的操作，焦点的点击，左右按钮的点击；开启定时器之前要关闭定时器，图片和焦点索引值的判断是他们一起运动的依据，

// 获取元素 要被js控制的元素
var oWrap=utils.getByClass('wrap')[0];
var oBoxImg=utils.getByClass('boxImg')[0];
var aImg=oBoxImg.getElementsByTagName('img');
var aBtn=oWrap.getElementByTagName('li');
var oLeft=utils.getByClass('left')[0];
var oRight=utils.getByClass('right')[0];
// n来决定让第几张图片来运动 索引值
 var n=0; 

// html是放着4张图片，但是前面说过，为了防止轮播到第四张的时候出现空白 所以在img的盒子后面追加一张图片
oBoxImg.innerHTML+='![](img/banner1.jpg)';
// 其图片的盒子的宽度对应的要变宽
oBoxImg.style.width=aImg.length*1000+'px';
// 图片自动轮播 开启定时器 开启定时器之前，应该关闭定时器
clearInterval(timer);
var timer=serInterval(autoMove,2000);
function autoMove(){
     if(n>=aImg.length-1){
          n=0;
          utils.css(oBoxImg,{left:-n*1000}); // 瞬间拉回
      }
      n++;
      animate(
         {
            ele:oBoxImg,
            target:{
               left:-n*1000
             }
           }
       );
       // 焦点与图片一起轮播 要获得n的值，必须要在此调用 定时器是异步的操作
       bannerTip();
 }

  // 焦点与图片一起轮播
  function bannerTip(){

// var tmp=n>=aBtn.length?0:n;  三目运算符思路
// aBtn[i].className=i==tmp?"active":null;
      // 处理图片索引值
      for(var i=0;i<aBtn.length;i++){
      // i的取值：0 1 2 3  n的取值：0 1 2 3 4 对aBtn的长度4求余后：0 1 2 3 0 1 2 3
          
// 只有当焦点的索引值和图片的索引值一样的时候才一起运动          aBtn[i].className=i==n%aBtn.length?"active":null;  // 求余的思路
       }
  }

// 鼠标移入停止运动，鼠标移除，继续运动，鼠标移入是在最外层的容器
oWrap.onmouseover=function(){
      clearInterval(timer);
      // 让左右按钮显示
      oLeft.style.display=oRight.style.display='block';
 };

oWrap.onmouseout=function(){
    clearInterval(timer);
    timer=setInterval(autoMove,2000);// 重新调用autoMove函数
    oLeft.style.display=oRight.style.display='none';
 };

// 点击左右焦点 手动切换轮播图
handleChange();
function handleChange(){
   // 循环焦点的按钮，根据对应的索引值来进行操作
   for(var i=0;i<aBtn.length;i++){
        // 当在循环里面有事件的操作的时候，事件是异步的，所获取的i值是错误的，所以要使用自定义属性或者闭包来解决这个问题
        (function(index){
            // 拿到正确的对应的索引值，赋值给n n是决定第几张图片的运动
            aBtn[index].onclick=function(){
                n=index;
                // 图片运动
                animate({
                  ele:oBoxInner,
                  target:{
                       left:-n*1000
                     }
                 });
     // 焦点的运动
     bannerTip();
             }
         })(i);
    }
   
 }

// 左右按钮的点击运动
oRight.onclick=autoMove; // 当右边点击的时候就会调用autoMove运行
oLeft.onclick=function(){
   if(n<=0){
       n=aBtn.length;
       utils.css(oBoxImg,'left',-n*1000); // 快速拉到第四张图片
       
    }
    n--;
    animate({
      ele:oBoxImg,
      target:{
         left:-n*1000
       }
     });
     bannerTip();
}

代码的地址：第八周

---

完善轮播图

上面是简单的使用原生的JS实现了图片的轮播，直接在html代码里面写死了图片的地址，不方便以后我们更改图片，使用Aajx来动态的请求图片数据，涉及到把数据绑定到页面上面，然后让图片的延迟加载，为了不让图片一开始就加载出现，把图片地址先存放在图片的自定义属性上面，先显示一张默认的图片，等一段时间后（定时器的设置），再显示真正的图片，自定义属性的获取getAttribute()；注意异步操作的n值的获取

// 获取元素
var oWrap=utils.getByClass('wrap')[0];
var oBoxImg=utils.getByClass('boxImg')[0];
var aImg=oWrap.getElementsByTagName('img');
var oUl=utils.getChildren(oWrap,'ul')[0];
var aLi=oWrap.getElementsByTagName('li');
var oLeft=utils.getByClass('left')[0];
var oRIght=utils.getByClass('right')[0];

 var n=0;// 决定图片显示的索引值
var data=null; // 接收的数据

// 请求数据 ajax请求数据
getData();
function getData(){
    // ajax请求四步
    var xml=new XMLHttpRequest();
    // 防止缓存 在请求的地址后面加上随机数 false是同步
    xml.open('get','json/data.txt?'+Math.random(),false);
 }
 xml.send(); // 发送请求
 xml.onreadystatechange=function(){
       // 响应数据 准备状态是4 并且状态码是2开头的三位数
       if(xml.readyState==4&&/^2\d{2}$/.test(xml.status)){
          data=utils.jsonParse(xml.responseText);// data接收响应的数据
        };
  }
// 绑定数据
bind();
function bind(){
   // 绑定数据的方法：字符串拼接或者是模版字符串,ES6支持的语法
   var str=''; // 图片的拼接
   var strLi=''; // 
   for(var i=0;i<data.length;i++){
   // 模版拼接
       str+=`<img src="" realImg="${data[i].imgSrc}" alt=""/>`;
       // 刚开始绑定的时候 默认第一张图片是active
       strLi+=i==0?'<li class="active"></li>':'<li></li>';
    }
     // 还得给oBoxImg 追加第一张图片 改变oBoxImg的宽度
     str+='<img src="" realImg="img/banner1.jpg" alt=""/>';
     oBoxImg.innerHTML=str;
     oBoxImg.style.width=aImg.length*aImg[0].offsetWidth+'px';
     oUl.innerHTML=strLi;
 }

// 图片延迟加载，首先显示的是默认图片
setTimeout(lazyImg,500);
function lazyImg(){
   for(var i=0;i<aImg.length;i++){
       (function(index){
           var img=aImg[index];
           // 创建一个临时的图片对象
           var tmpImg=new Image;
           tmpImg.src=img.getAttribute('realImg');
           // 图片地址的校验
           tmpImg.onload=function(){
              img.src=this.src;
            }
        })(i);
    }
 }
// 图片的自动轮播
clearInterval(timer);
var timer=setInterval(autoMove,2000);
function autoMove(){
    if(n>=aImg.length-1){
        n=0;
        utils.css(oBoxImg,{left:-n*1000});
     }
     n++;
     animate({
        ele:oBoxImg,
        target:{
           left:-n*1000
         },
         effect:2
      })
      bannerTip();
 }
// 焦点的自动轮播
bannerTip();
function bannerTip(){
   for(var i=0;i<aLi.length;i++){
   // i===n%aLi.length 相等则说明 焦点和图片要同步移动
      aLi[i].className=i===n%aLi.length?'active':null;
    }
 }
// 鼠标移入停止，移除继续
oWrap.onmouseover=function(){
   clearInterval(timer);
   oLeft.style.display=oRight.style.display='block';
 };
 oWrap.onmouseout=function(){
   clearInterval(timer);
   timer=setInterval(autoMove,2000);
   oLeft.style.display=oRight.style.display='none';
  };
  
// 点击焦点，手动切换
handleChange();
function handleChange(){
     // 循环点击按钮
     for(var i=0;i<aLi.length;i++){
        aLi[i].index=i;// 自定义属性保存正确的i值 循环里面有点击事件，异步操作
        aLi[i].onclick=function(){
           // 把点击的索引值赋值给n 来决定让第几张图片显示
           n=this.index;
           animate({
              ele:oBoxImg,
              target:{
                left:-n*1000
               },
               effect:2
            })
          // 焦点也动
          bannerTip();
         }
      }
 }
// 点击左右按钮进行切换
oRight.onclick=autoMove;
oLeft.onclick=function(){
    if(n<=0){
        n=aImg.length-1;
        utils.css(oBoxImg,{left:-n*1000});// 瞬间出现最后一张图片
    }
    n--;
    animate({
        ele:oBoxImg,
        target:{
            left:-n*1000
        },
        effect:2
    })
    bannerTip();
 }