JS效果：轮播

个人博客新地址：→点我♪(＾∀＾●)ﾉ

基本轮播思路

实现最简单的轮播，我称之为跑火车类型。

火车上的东西是要展现的东西，每一节火车车厢就是轮播一次动画所展现的东西

让火车每次经过展示区域，而且每一节车厢刚好等于展示区域的面积。就可以实现啦。

Html布局

布局上如何实现跑火车呢？根绝上面的图片还是很清晰的：

一系列的大小相等的图片平铺，利用CSS布局只显示一张图片，其余隐藏。通过计算偏移量利用定时器实现自动播放，或通过手动点击事件切换图片。

  <div class="container">
      <ul class="img">
          <li><img src="img/1.jpg"></li>
          <li><img src="img/2.jpg"></li>
          <li><img src="img/3.jpg"></li>
          <li><img src="img/4.jpg"></li>
          <li><img src="img/5.jpg"></li>
      </ul>
      <ul class="point"></ul>
      <ul class="arrow">
          <li class="left"><</li>
          <li class="right">></li>
      </ul>
  </div>

相应的CSS样式

在位置上，就需要存放图片的容器相对展示容器来说绝对定位 （CSS核心）

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 520px;
            height: 280px;
            margin:100px auto;
            position: relative;
            box-shadow: 0 0 10px 2px #ccc;
            overflow: hidden;
        }
        ul.img{
            width: 1000%;
            position: absolute;
            top:0;
            left:0;
        }
        ul.img li{
            list-style: none;
            float: left;
        }
        ul.point{
            position:absolute;
            left:50%;
            bottom:10px;
            margin-left:-75px;
        }
        ul.point li{
            float: left;
            margin:0 5px;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            background: pink;
            list-style: none;
            cursor:pointer;
        }
        ul.point li.now{
            background: red;
            color:#fff;
        }
        .arrow{
            position: absolute;
            left:0;
            width: 100%;
            top:50%;
            margin-top:-25px;
        }
        .arrow li{
            list-style: none;
            width: 35px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
            background: rgba(0,0,0,.2);
            cursor: pointer;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
    </style>

Js实现

根据原理，carousel函数需要获取图片，根据图片来生成小点的个数。具体如下：
要实现无缝轮播，即火车跑完一次的时候，再重来一次会有空白，所以需要复制第一张图片到最后一张弥补这个缺陷，就可以实现无缝轮播了

• @轮播DIV容器，container
• @轮播箭头容器，arrowContainer 若无轮播箭头 则传undefined
• @轮播圆点UL活动样式，pointStyle 若不需要轮播圆点则传undefined
• @图片自动切换的时间2000ms，time
• @图片轮播动画的速度20,speed
• 轮播结构

function carousel(container, arrowContainer, pointStyle, time, speed) {
    var ul = container.children[0];//图片ul
    var index = 0;//记录图片索引
    var newLi = ul.children[0].cloneNode(true);//在最后一幅图后面添加第一幅图 形成无缝轮播
    ul.appendChild(newLi);
    var liS = ul.children;//所有图片的集合
    ul.style.width = liS.length * 100 + '%';//图片总宽度
    /*判断是否需要圆点*/
    if (pointStyle != undefined) {
        var point = container.children[1];//小圆点ul
        //根据图片数量生成小圆点，初始化轮播圆点状态
        for (var i = 1; i < liS.length; i++) {
            var li = document.createElement('li');
            li.innerHTML = i;
            point.appendChild(li);
        }
        var points = point.children;
        light();
        /*
        * 圆点点击更换图片
        */
        for (var j = 0; j < points.length; j++) {
            points[j].index = j;
            points[j].onclick = function () {
                index = this.index;
                animate(ul, -index * container.offsetWidth, speed);
                light();
            };
        }

        /*
        * 圆点样式改变函数
        */
        function light() {
            for (var i = 0; i < points.length; i++) {
                points[i].className = "";
            }
            index > (points.length - 1) ? points[0].className = pointStyle : points[index].className = pointStyle;
        }
    }

    /*
    * 右键头函数
    */

    function rightPlay() {
        index++;
        if (index > liS.length - 1) {
            ul.style.left = 0;
            index = 1;
        }
        animate(ul, -index * container.offsetWidth, speed);
        pointStyle == undefined ? '' : light();
    }

    /*
    * 左键头函数
    */

    function leftPlay() {
        index--;
        if (index < 0) {
            ul.style.left = -(liS.length - 1) * container.offsetWidth + "px";
            index = liS.length - 2;
        }
        animate(ul, -index * container.offsetWidth, speed);
        light();
    }

    /*判断是否需要左右箭头*/
    if (arrowContainer != undefined) {
        var left = arrowContainer.children[0];//左箭头
        var right = arrowContainer.children[1];//右箭头
        left.onclick = leftPlay;
        right.onclick = rightPlay;
    }



    /*
    * 自动轮播函数
    */
    container.timer = setInterval(rightPlay, time);
    container.onmouseover = function () {
        clearInterval(container.timer);
    };
    container.onmouseout = function () {
        clearInterval(container.timer);
        container.timer = setInterval(rightPlay, time);
    };
}


/*
* @水平动画函数
* @运动对象，obj
* @运动目标位置，target
* @运动速度,speed
*
 */
function animate(obj, target, sp) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var speeds = (obj.offsetLeft > target ? -sp : sp);
        if (Math.abs(obj.offsetLeft - target) < sp) {
            obj.style.left = target + "px";
            clearInterval(obj.timer);
        } else {
            obj.style.left = obj.offsetLeft + speeds + "px";
        }
    }, 20)

}

我在说什么

还有个千层饼的轮播,千层饼：利用opcaticy，display，z-index来操作。
顺带提下布局：无非让要展示的东西放在一个盒子里，利用显示和隐藏来实现轮播的效果。

写作还真像耕耘。