数据驱动的轮播图神奇之处！从零开始学习旋转木马

听说你要玩儿那个叫旋转木马的轮播图了呀?挺好玩儿的样子!那就让我给你简单介绍下好了，你看看它究竟有什么门道。

首先，咱理解这儿的旋转木马概念哈。就是说有个jsonArr，用来设定啥图片放在哪里。然后你随便点一下，这个jsonArr就重新排列，画面也跟着变了。这不，图片就好像木马似的转起来！

说到数据驱动的界面，意思就是你改动数据后，界面就会随之改变！比如，你在jsonArr里改点什么，界面上的图片摆放位置也会跟着变，这就是数据驱动界面的神奇之处。

数组不只是有那几个简单操作：push、pop、shift和unshift，其实还有别的玩法，比如splice、concat和slice这些。咱们先来了解这几种基础操作。

好，开始看代码！首先给你们看张美美的轮播图预览，肯定会有点心动！然后我要告诉你们，想要看更多轮播图相关的专题内容吗？只需点下面的链接就对了。像javascript、jquery和Bootstrap等各种类型的轮播图效果都在那里等你去探索~




 
 
 
  * {
   margin: 0;
   padding: 0;
   border: none;
   list-style: none;
  }
  img {
   vertical-align: top;
  }
  body {
   background-color: #000;
  }
  #slider {
   width: 1200px;
   height: 460px;
   margin: 100px auto;
   position: relative;
   /*background-color: red;*/
  }
  #slider li {
   position: absolute;
   left: 200px;
   top: 0;
  }
  #slider li img {
   width: 100%;
   height: 100%;
  }
  .slider_ctl_prev, .slider_ctl_next {
   width: 76px;
   height: 112px;
   position: absolute;
   top: 50%;
   margin-top: -56px;
   z-index: 99;
  }
  #slider_ctl {
   opacity: 0;
  }
  .slider_ctl_prev {
   background: url("images/prev.png") no-repeat;
   left: 0;
  }
  .slider_ctl_next {
   background: url("images/next.png") no-repeat;
   right: 0;
  }
 



 
  
  
  
  
  
 
 
  
  
 



 window.addEventListener('load',function (ev) {
  // 1. 获取需要标签
  var slider = myTool.$('slider');
  var sliderMain = myTool.$('slider_main');
  var allLis = sliderMain.children;
  var sliderCtl = myTool.$('slider_ctl');
  // 2. 位置信息
  var jsonArr = [
   {"width":"400", "top":"20", "left":"50", "opacity":"0.2", "zIndex":"2"},
   {"width":"600", "top":"70", "left":"0", "opacity":"0.8", "zIndex":"3"},
   {"width":"800", "top":"100", "left":"200", "opacity":"1", "zIndex":"4"},
   {"width":"600", "top":"70", "left":"600", "opacity":"0.8", "zIndex":"3"},
   {"width":"400", "top":"20", "left":"750", "opacity":"0.2", "zIndex":"2"}
  ];
  // 将位置信息作用到图片上去
  for (var i = 0; i < jsonArr.length; i++) {
   myTool.slowMoving(allLis[i], jsonArr[i]);
  }
  // 3. 设置显示和隐藏
  slider.addEventListener('mouseover', function () {
   myTool.slowMoving(sliderCtl, {'opacity': 1});
  });
  slider.addEventListener('mouseout', function () {
   myTool.slowMoving(sliderCtl, {'opacity': 0});
  });
  // 4. 监听点击
  for (var j = 0; j < sliderCtl.children.length; j++) {
   var item = sliderCtl.children[j];
   item.addEventListener('click',function (evt) {
    if (this.className === 'slider_ctl_prev'){
     // 点击左边
     // 两种方式
     // 1. 改变数据影响标签 数据驱动界面
     // 2. 改变标签适应数据
     jsonArr.push(jsonArr.shift())
    }else{
     // 点击右边
     jsonArr.unshift(jsonArr.pop())
    }
    // 重新布局
    for (var i = 0; i < jsonArr.length; i++) {
     myTool.slowMoving(allLis[i], jsonArr[i]);
    }
   },false);
  }
 },false)