轮播从无到有

1.轮播形式

千奇百怪，常见：透明度、位移

2.代码实现

2.1 透明度

基础代码

html

  <div class="my-slide">
    <ul class="slide-wrapper">
      <li>
        <a href="javascript:"><img src="http://cdn.dowebok.com/144/images/1.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:"><img src="http://cdn.dowebok.com/144/images/2.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:"><img src="http://cdn.dowebok.com/144/images/3.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:"><img src="http://cdn.dowebok.com/144/images/4.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:"><img src="http://cdn.dowebok.com/144/images/5.jpg" alt=""></a>
      </li>
    </ul>
    <a href="javascript:" class="ctrl prev">&lt;</a>
    <a href="javascript:" class="ctrl next">&gt;</a>
    <ul class="ctrl slide-box">
      <li class="current"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

  </div>

View Code

css

* {
      margin: 0;
      padding: 0;
    }

    img {
      border: 0;
    }

    ul,
    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .my-slide {
      position: relative;
      margin: 0 auto;
      width: 1000px;
      height: 320px;
      overflow: hidden;
    }

    /* .slide-wrapper */
    .my-slide .slide-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
    }

    .my-slide .slide-wrapper li{
      opacity: 0;
    }
    .my-slide .slide-wrapper li:nth-child(1) {
      opacity: 1;
    }
    .my-slide .slide-wrapper li,
    .my-slide .slide-wrapper li a,
    .my-slide .slide-wrapper li img{
      position: absolute;      
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;;  
     
    }

    /* btn */
    .my-slide .prev,
    .my-slide .next {
      position: absolute;
      top: 50%;
      z-index: 2;
      width: 35px;
      height: 70px;
      line-height: 70px;
      margin-top: -35px;
      border-radius: 3px;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0.6;
      color: #fff;
      text-align: center;
      background-repeat: no-repeat;
      transition: opacity .2s linear 0s;
    }

    .my-slide a:hover {
      opacity: 1;
    }

    .my-slide .prev {
      left: 5px;
    }

    .my-slide .next {
      right: 5px;
    }


    /* slide-box */
    .my-slide .slide-box {
      position: absolute;
      z-index: 30;
      left: 50%;
      bottom: 12px;      
      margin-left: -60px;
      width: 120px;      
      height: 20px;
      padding: 0 4px;
      text-align: center;
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.5);
    }

    .my-slide .slide-box li {
      display: inline-block;
      margin: 4px 2px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #fff;
      cursor: pointer;
    }
    .my-slide .slide-box li.current{
      background-color: #fe6500;
    }

    .my-slide .slide-box li:hover {
      background-color: #fe6500;
    }

View Code

2.1.1 初级实现自动轮播功能

var wrap = $('.my-slide');

    // content
    var content_wrap = wrap.find('.slide-wrapper');
    var content_lis = content_wrap.find('li');

    // bottom box
    var btn_wrap = wrap.find('.slide-box');
    var btn_lis = btn_wrap.find('li');

    // ctrls
    var ctrls = wrap.find('.ctrl');
    var prev = wrap.find('.prev');
    var next = wrap.find('.next');

    // run params
    var timer = null;
    var index = 0;
    var after = 0;

    setInterval(function(){      
      if(index>=content_lis.length){
        index=0;
      }
      content_lis.eq(index).animate({
        opacity:0
      });
      after=index+1>=content_lis.length?0:index+1;
      content_lis.eq(after).animate({
        opacity:1
      });
      index++;
    },500);

View Code

2.1.2 进阶常规功能：左右点击、定点点击、自动轮播

var wrap = $('.my-slide');

    // content
    var content_lis = wrap.find('.slide-wrapper li');

    // bottom box
    var btn_lis = wrap.find('.slide-box li');

    // ctrls
    var ctrls = wrap.find('.ctrl');
    var prev = wrap.find('.prev');
    var next = wrap.find('.next');

    // run params
    var timer = null;
    var index = 0;
    var after = 0;

    var run = function () {
      timer = setInterval(function () {
        after = index + 1 >= content_lis.length ? 0 : index + 1;
        change.call(null, index, after);
        index = after;
      }, 2000);
    };

    run();

    btn_lis.each(function () {
      $(this).click(function () {
        after = $(this).index();
        change.call(null, index, after);
        index = after;
      });
    });

    prev.click(function () {
      after = index - 1 < 0 ? content_lis.length - 1 : index - 1;
      change.call(null, index, after);
      index = after;
    });
    next.click(function () {
      after = index + 1 >= content_lis.length ? 0 : index + 1;
      change.call(null, index, after);
      index = after;
    });

    ctrls.hover(function () {
      clearInterval(timer);
    }, function () {
      run();
    });

    function change(prev, next) {
      content_lis.eq(prev).stop().animate({
        opacity: 0
      });
      content_lis.eq(next).stop().animate({
        opacity: 1
      });
      btn_lis.eq(next).addClass('current').siblings().removeClass('current');
    }

View Code

2.1.3 组件化在 2.1.2 基础上处理成 jq plugin

2.1.4 扩展组件、增加配置

轮播 从无到有

猜你喜欢