用html无缝滚动怎么做,用Jquery制作一个无缝滚动轮播

这篇文章的目的是帮助自己复习，还有写东西的时候的思路。

Paste_Image.png

首先我们看一下制作一个轮播的思路:

先把轮播的HTML和CSS给写好，这一步就不多讲，本文章主要讲的是JS的实现。

既然是无缝的轮播，那么首先图片就要排成一排

有一个视口，超出视口的图片要隐藏(在CSS实现，overflow：hidden)

滚动的时候视口进行偏移，偏移到下个图片

到最后一张(或第一张往前)的时候，要连续的滚动，而不是瞬间回滚到第一张

有了思路就可以开始实现JS了

先附上HTML结构：

• 
• 
• 

<

>

首先我们写效果的第一步是什么？就是拿到相应的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张！)

第四行设置视口的初始位置和它的总宽度

然后元素的排列就变成了如下视口图(自己画的有点丑)

Paste_Image.png

其中数字代表的是图片的顺序，因为我们上面设置了视口的初始位置(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;

}

})

}

就是修改了下其中的参数，具体可以参考之前的视口图食用。

这样就完成啦！看看效果吧！

这是源码

无缝轮播demo