无缝轮播
- 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 关掉
})
}
- 代码地址
- 预览地址
渐变轮播
- 预览地址
- 如果不能浏览,请加载脚本