javaScript中的原生图片轮播

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

html代码

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

// 图片盒子
  

    ![](img/banner1.jpg)
    ![](img/banner2.jpg)
    ![](img/banner3.jpg)
    ![](img/banner4.jpg)
  
// 图片焦点
   

        

        

        

        

    
 // 左右翻页箭头  href="javascript:;" 取消其点击的效果
 
 
 

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

代码的地址：第八周

---

完善轮播图

上面是简单的使用原生的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`;
       // 刚开始绑定的时候 默认第一张图片是active
       strLi+=i==0?'
':'
';
    }
     // 还得给oBoxImg 追加第一张图片 改变oBoxImg的宽度
     str+='';
     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-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