无缝轮播图

　　无缝轮播图实现原理：

　　将一些列大小相同的图片横向排列，利用css语法只显示其中一张图片，其余的图片隐藏。通过改变装图片盒子的lmargin-left值，切换图片。

　　向左切换，从图片img1切换到img2，改变margin-left的值为：margin-left: -1180px，可视区域显示第二张图片，然后剪切第一张图片追加到图片列末尾。

　　重复此项过程就可以实现图片向左的无缝轮播。反方向也是一样的道理，就图一所言，若我想要将img1切换到img4，则进行以下操作：

　　首先将img4剪切插入到图片列的头部，然后将margin-left从margin-left：-1180px运动到margin-left：0,实现图片的向右切换。

　　重复此项操作，就实现了图片向右切换。

　　代码段：

　　html布局如下：

<div class="banner-wrapper">
   <ul class="banner-content">
      <li class="banner-unit">
         <img src="http://img.ui.cn/data/upload/201712/1514545968_297.jpeg" alt="" />
      </li>
      <li class="banner-unit">
         <img src="http://img.ui.cn/data/upload/201712/1514200192_680.jpeg" alt="" />
      </li>
      <li class="banner-unit">
         <img src="http://img.ui.cn/data/upload/201712/1513652033_127.jpeg" alt="" />
      </li>
      <li class="banner-unit">
         <img src="http://img.ui.cn/data/upload/201712/1514169471_728.jpeg" alt="" />
      </li>
   </ul>
   <a href="javascript:void(0)" class="ear left-ear">&lt;</a>
   <a href="javascript:void(0)" class="ear right-ear">&gt;</a>
</div>


css渲染如下：

.banner-wrapper{
   width: 1180px;
   height: 350px;
   margin: 0 auto;
   overflow: hidden;
   position: relative;
}
.banner-content{
   width: 5000px;
}
.banner-wrapper .banner-unit{
   width: 1180px;
   height: 350px;
   float: left;
}
.banner-unit img{
   width: 1180px;
   height: 350px;
}
.ear{
   position: absolute;
   width: 50px;
   height: 100%;
   top: 0;
   background-color: #3498db;
   text-align: center;
   line-height: 332px;
   font-size: 36px;
   color: #fff;
}
.ear.left-ear{
   left: 0;
}
.ear.right-ear{
   right: 0;
}

JavaScript代码：

var $banner_content = $('.banner-content');
//  右边耳朵下一张
// 1.获取右边耳朵
var $right_ear = $(".right-ear");
// 2.给右边耳朵绑定事件
$right_ear.on('click', function (ev) {
   $banner_content.animate({
      'margin-left': -1180
   },function () {
      var firstEl = $(this).children().first();
      $(this).append(firstEl).css({'margin-left': 0});;
   });
});

///  获取左边耳朵
var $left_ear = $(".left-ear");
// 2.给右边耳朵绑定事件
$left_ear.on('click', function (ev) {
   var lastEl = $banner_content.children().last();
   $banner_content.prepend(lastEl).css({
      'margin-left': -1180
   }).animate({
      'margin-left': 0
   });;
});

猜你喜欢