轮播

无缝轮播

• css需要让图片或者文本水平排列,overflow:hidden隐藏其他图片
• 整体图片向左/右偏移,就会出现不同的照片

        /*设置父容器宽高,隐藏后面的元素*/
        .carousel{
            width: 320px;
            height: 180px;
            overflow: hidden;

        }

        /*特别重要的一步,不管容器有多宽,元素排成一列*/
        .carousel .img-ct{
            width: 1280px;
            overflow: hidden;
        }

轮播示意图
元素排成一列,设置总宽度

• 但是当我们到最后一张照片时,后面就没有了,怎么循环轮播呢?
  • 可以clone头位元素和末尾元素
  • 可以改变dom的顺序
• 立刻整体移位,由clone的3,移位到真正的3
  clone元素

把css样式写好,我们就用jQuery把逻辑写一下

• 克隆第一个元素

//图片容器
var $imgCt = $("img-ct")
//获取图片的数量
var $imgs = $(".carousel .img-ct>li")
var imgCount = $imgs.length
//图片的宽度
var imgWidth = $imgs.width()
//把第一个图片clone到最后
$imgCt.append($imgs.first().clone())

注意有一点区别

jQuery区别

当我门克隆元素完成的时候,需要注意一点的是图片的总宽度

clone元素跑下面了
我们可以看到多出来两个克隆的元素,超出ul的长度,不水平排列了,所以我们应该设置长度在js中,而不是css里,不然一旦是其他数量的图片修改特别麻烦

//计算父容器总宽度
$imgCt.width((imgCount +2)*imgWidth)

但是我们clone以后第一张图片往后跑了一格,我们来把它弄回来

//让用户看到的是第一张图片我们就偏移图片
$imgCt.css({left: -imgWidth})

我们一点点的写,下面就是写两个函数,一个往左点击偏移,一个往右点击偏移

//函数展示上一页
$nextBtn.click(function(){
    playNext()
})
//展示下一页
$preBtn.click(function(){
    playPre()
})
//点击下一页图片往左偏移
function playNext(){
    $imgCt.animate({
        //原来基础上在减小宽度
        left: "-=" +imgWidth
    })
}
function playPre(){
    $imgCt.animate({
        //原来基础上在减小宽度
        left: "+=" +imgWidth
    })
}

但是有出先了一个问题,当我一直往一边点击时,当图片偏移完了.结果出现了空白,该怎么解决呢?我们需要让点击到最后一张图片时,立即回到第一张,循环,该怎么做呢?

//把上面的函数改一下
var pageIndex = 0
//点击下一页图片往左偏移
function playNext(){
    $imgCt.animate({
        //原来基础上在减小宽度
        left: "-=" +imgWidth
    },function(){
        //点击一次pageIndex加一次
        pageIndex++
        //如果pageindex的值等于了图片的数量
        if (pageIndex === imgCount) {
            //pageindex立刻回到第一张图片
            pageIndex = 0
            //容器初始化值为图片宽度
            $imgCt.css({left: -imgWidth})
        }
    })
}

打印pageIndex

大家看上面的动图,会发现,pageIndex,一直在0123循环,因为图片数量为4,所以判断当pageIndex为图片的数量时,使pageindex值返回去做判断,设置偏移量就可以了

• 那怎么配合下面的选项卡点击呢?

//把这个函数调用放在左右点击click事件中
function setBullet(){
    //获取li,然后移除所有的active,并给下标添加class为actie
    $bullets.removeClass("active").eq(pageIndex).addClass("active")
}

圆点的样式跟着点击

• 现在可以写当点击下面圆点图片动画的函数

//点击选项卡
$bullets.click(function(){
    // 获取下标
    var index = $(this).index()
    console.log(index)
    //如果点击的下标比轮播图片的下标大
    if (index > pageIndex) {
        //执行next函数,往左偏移,到达对应位置
        playNext(index - pageIndex)
    }else if (index < pageIndex) {
        playPre(pageIndex-index)
    }
})

当然还需要修改一下其他函数的参数

• 最后再添加一个定时器,就可以自动轮播了

setInterval(function(){
    playNext(1)
},2000)

我们还可以把代码优化一下,防止多次重复点击,

// 变量
var isAnimate = false

//点击下一页图片往左偏移
function playNext(len){
  if(isAnimate) return  // 如果动画return 掉
  isAnimate = true 
    $imgCt.animate({
        //原来基础上在减小宽度
        left: "-=" +len*imgWidth
     },function(){
      pageIndex += len
      
      if(pageIndex == imgCount){
        pageIndex = 0
        $imgCt.css({left: -imgWidth})
      }
      setBullet()
      isAnimate = false  // 设为false 关掉
      
    })
}

• 代码地址
• 预览地址

渐变轮播

• 预览地址
  • 如果不能浏览,请加载脚本