关于轮播的思路（使用clone 移动宽度）

1. 实现如下轮播效果(渐变轮播)
   task27-1

2. 一个页面有3个轮播
   task-27-2

3. 实现如下无限循环滚动轮播效果
   task-27-3

4. 全屏轮播
   task-27-4

思路

最近学习了用JQuery实现轮播，也开始自己尝试写一些文章巩固知识，下面是一些轮播的知识。

什么是轮播

用图片来说明一下（图片是转载的）

轮播效果图.png

• 那么，他的原理是怎样的呢？

1. 可以操作DOM的顺序来实现轮播效果（这个并不推荐，因为很吃性能）
2. 也是本文所说的，利用clone来实现轮播

• 以下是原理图

Paste_Image.png

原理是，clone两个边界，一个是开头（clone0），位于轮播框架最前的位置，一个是结尾（clone3）,位于轮播框架的最后的位置，只要在轮播的时候轮播到这两个边界，利用CSS直接改变整个轮播框架的位置来跳回到第一幅图（0）或者最后一幅图（3）。

• 接下来，让我们看一下他的结构来继续了解原理吧！

  • HTML的结构

我们知道，轮播是有几张图片组成，那么我们可以使用

• 来编写。

< >

• CSS结构

  1. 我们要让轮播图设置成绝对定位，这样就可以使用JS让他移动
  2. 要让图片打横排列，必须设置浮动，问题来了，浮动之后，图片是如下面这样呈现的
  • 

    Paste_Image.png
    
    因此，我们需要隐藏元素，只让他呈现一张图。我们可以使用overflow:hidden来实现这个功能，他可以让多余的元素隐藏。

/* 基础样式去除 */
html,body,ul,li{
             margin:0;
            padding:0;
a{
            text-decoration:none
  }
li{
            list-style:none
}
/*整个轮播框和每个轮播图的样式 */
.carousel{
            width:500px;
            height:300px;
            overflow:hidden;
            position:relative;
.img-ct{
            position:absolute
}
.img-ct:after{
            content:"";
            display:block;
            clear:both
}
.img-ct li{
            float:left
            width:500px;
            height:300px;
}
/* 左右按钮样式 */
.btn{
            position:absolute;
            top:50%;
            margin-top:10px;
            width:30px;
            height:30px;
            line-height:30px;
            text-align:center;
            border-radius:30px;
            background:#eee;
            color:#fff;
            opacity:0.7;
.btn:hover{
            opacity:1;
}
.left{
            left:10px;
}
.right{
            right:10px;
}
/* 下栏的按钮 */
.botton-btn{
            position:absolute;
            bottom:10px;
            left:50%;
            transform:translateX(-50%);
.botton-btn:after{
            content:''
            display:block;
            clear:both
}
.botton-btn li{
             margin-left:9px;
             width:30px;
             height:15px;
            float:left;
            border-radius:5px;
            background:#fff;
            cursor:pointer
.botton-btn li.active{
            background:#4E443C

• Javascript
  CSS和HTML写完了，我们可以开始clone两个边界，然后通过改变整个轮播框的位置来让他实现轮播

//各种变量声明
var $ct = $('.img-ct"),
      $left = $('.left"),
      $right = $('.right'),
      $bottomBtn = $('.bottom-btn'),
      $items = $('.img-ct').children();
var imgWidth = $ct.children.width(), //获取每张图片的宽度，用于到时候计算移动
        imgCount = $items.length; //获取轮播框里有多少张图片
//使用clone()创造边界
$ct.prepend($item.last().clone()); //克隆最后的元素在最前面
$ct.append($item.first().clone());
newImgCount = $ct.children.length //更新轮播框里有多少张图片
$ct.css({
left:0-imgWidth, //因为创造了边界，因此需要向左退一格
width:imgWidth*newImgCount // 更新模态框的新宽度，让他们在同一排呈现，不然会出现白屏什么的问题
})
//点击左右换图片
var curIdx = 0 ;//当前的图片，0是第一张；
var lock = false; //状态锁
//向右
function playNext(idx){
  var idx = idx || 1 //如果没有特别说明是第几个就只动1个
  if(!lock){
          lock = true;
          $ct.animate({left="-=" +(imgWidth*idx)},function(){ // “-=”等于向右偏移，偏移到下一张图片的位置，也就是需要偏移的那张图片的宽度,并且写个回调函数进行判断
          curIdx = (curIdx +Idx) %imgCount //利用求余的方式，当curIdx ===0 也就是到边界，直接改变css
    if(curIdx === 0){
           $ct.css({left:0-imgWidth}) //第一张图的位置
           curIdx = 0;//归0，从第一张开始
}
  lock =false
  setItem();
    })
  }
}
//向左
function playPre(idx){
var idx = idx || 1;
if(!lock){
        lock = true;
        $ct.animate({left:"+="+(imgWidth * idx),function(){ //"+="向左偏移
        curIdx = (imgCount + curIdx - idx) % imgCount  ;
if (curIdx === (imgCount -1){
        $ct.css({left:0-imgWidth*imgCount})
}
        lock = false;
        setItem();
})
}
}
//下栏按钮变色
function setItem(){    $nav.find('li').removeClass('active').eq(curIdx).addClass('active')}
//下栏按钮选取轮播第几张图片
$nav.find('li').on('click',function(){    //按第几个就去第几个   
 var idx = $(this).index();  
  if(idx > curIdx){        
        playNext(idx-curIdx);  
  }   
 else if(idx < curIdx) {     
        playPre(curIdx-idx);  
 }
//事件绑定
$right.on('click',function(){  
          playNext();
})
$left.on('click',function(){  
          playPre();
})

这样，我们就能把轮播完成了，主要掌握移动轮播框和clone首尾元素作边界的思路就能实现