网站轮播图(banner)--无缝轮播
时间：2023-09-27 10:12:01 | 来源：网站运营
时间：2023-09-27 10:12:01 来源：网站运营
网站轮播图(banner)--无缝轮播：
现在各个网站的制作都离不开一些图片的轮播，也经常会使用一些插件来完成，那么具体的原理以及自己能写一个这样的功能吗？
现在流行的是用户体验，早期的图片轮播与现在的方式早已发生变化，那么接下来介绍一下无缝的轮播。
举例:四张图轮播，向后不停的切换不会产生晃眼的拖动效果
实现原理：
html中body部分css部分
其实最重要的部分是JS部分，控制
其实理解也不难。
这里用了四张图，那么我们需要复制第一张图，追加到图片最末处，这样产生假性的５张图了，在向左点击时为了不产生晃眼效果，追加一张图是为了利用css属性迅速将整个banner部分归位到 {left:0} 且这样利用css拖动肉眼是根本察觉不到的,在什么时候迅速归位呢，就是在点击到最后一张(也就是复制的那张),写个代码需要一个判断,
if(i==size){
$(".banner .img").css({left:0});
i=1;
}
如果点击到最后一张，那么将banner拖动到0的位置，再将计数器
i=1也就是第二张图，为什么是这样，因为刚点的那最后一张实际也是第一张的克隆，所以肉眼看到的就是第一张，那再点一下是不是需要看到的第二张呢。原因就是这样的原理。
同理，在点向右的按纽时也需要一个判断,
if(i == -1){
$(".banner .img").css({left:-(size-1)*520});
i=size-2;
}
$(".banner .img").stop().animate({left:i*-520},500);
}
这样的一个无缝轮播效果即产生了，自己也可以再优化一下是不是也能写一个插件了呢^_^!
在线咨询
