这篇文章的目的是帮助自己复习,还有写东西的时候的思路。
Paste_Image.png
首先我们看一下制作一个轮播的思路:
- 先把轮播的HTML和CSS给写好,这一步就不多讲,本文章主要讲的是JS的实现。
- 既然是无缝的轮播,那么首先图片就要排成一排
- 有一个视口,超出视口的图片要隐藏(在CSS实现,
overflow:hidden
) - 滚动的时候视口进行偏移,偏移到下个图片
-
到最后一张(或第一张往前)的时候,要连续的滚动,而不是瞬间回滚到第一张
有了思路就可以开始实现JS了
先附上HTML结构:
<body>
<div class="ct">
<ul class="img-ct">
<li><a
<li><a
<li><a
<li><a
</ul>
<a class = 'pre arrow' href="#"><</a>
<a class = 'next arrow' href="#">></a>
<ul class="nav">
<li class = 'setcolor'></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
首先我们写效果的第一步是什么?就是拿到相应的DOM节点
var $ct = $('.img-ct'), //获取视口节点
$items = $ct.children(), //获取视口下需要轮播的图片元素
$pre = $('.pre'), //获取上一张功能按钮
$next = $('.next'), //获取下一张功能按钮
imgWidth = $items.width(),//获取滚动元素的宽
imgCount = $ct.children().size(),//获取有多少个滚动的元素
下面的代码是要实现思路4,5的核心,很重要!
$ct.prepend($items.last().clone()),
$ct.append($items.first().clone());
imgnewwidth = $ct.children().size();
$ct.css({left:0-imgWidth,width:imgnewwidth*imgWidth})
- 第一行首先获取到轮播图片元素的最后一张然后clone,然后将clone后的副本prepend到视口的第一个
- 第二行同理,把第一张clone一下append到最后面
- 第三行重新计算元素的数量,原本是4个。现在变成了6个(这里要注意!重新计算数量要重新查找DOM元素,不能直接利用上面的
$items.size
来计算,要重新使用$ct.children().size)
,不然还是4张!) - 第四行设置视口的初始位置和它的总宽度
然后元素的排列就变成了如下视口图(自己画的有点丑)
其中数字代表的是图片的顺序,因为我们上面设置了视口的初始位置(left:0-imgWidth
这里我给设置的图片宽度为500px),那么初始位置就变成了-500px,那么显示的图片就是第一张了(按上面那张图就是第二张)。
接下来开始绑定事件,我们想实现一个功能的时候,要先想能做什么,在去想要怎么做:
$next.on('click',function(){
playnext();
})
$pre.on('click',function(){
playpre();
})
这里我们为前进和后退按钮绑定了事件,当我点前进按钮的时候就会执行playnest函数,然后我们下面再想playnext函数的实现。
var curidx =0;//声明初始的坐标
var mov = 1;//移动的次数
function playnext(){
$ct.animate({left:'-='+mov*imgWidth},function(){
//当点击后,会执行这个动画,把视口向右移动一个图片宽度的距离,就刚好像滚动一样
curidx+=mov;//然后坐标加1,表明移动一格
if(curidx===imgCount){
$ct.css({left:0-imgWidth});
curidx=0;
}
//如果已经移动到了最后一张图片,也就是末尾clone的1图片,就马上将视口设置为刚开始那样,因为同一张图片的变换人是看不出来的,然后再把坐标给设置回0.
})
}
反之,后退按钮是一样的:
function playpre(){
$ct.animate({left:'+='+mov*imgWidth},function(){
curidx-=mov;
if(curidx===(-1)){
$ct.css({left:0-imgWidth*imgCount});
curidx=3;
}
})
}