我一直在寻找一个图像轮播,它可以同时显示多张图像,具有响应能力并且可以无限循环。
Elastislide 似乎是最合适的 ( http://tympanus.net/Development/Elastislide/index2.html )。
我能找到的唯一其他实用选项是 John Nikolakis 的 Liquid Carousel,它似乎有点老旧且不够优雅。
我已经让 Elastislide 自动播放(某种程度上),使用与 http://www.w3schools.com/js/js_timing.asp 中所示的 clearTimeout() 方法类似的方法。 , 但一旦它到达终点就会停止,因为时间只是调用下一个按钮 (.es-nav-next)。
我希望有人可以帮助我修改 Elastislide 以使其无限循环 - 或者我愿意接受有关满足我的 3 个要求(上面列出的)的不同解决方案的建议。
目前我正在本地安装 OpenCart,但如果有帮助,我可以提供一个静态示例并提供一个链接。
任何帮助或建议将不胜感激,到目前为止我在 javascript 方面已经花了很多时间:)
最佳答案
Elastislide 代码已经发展,上述解决方案不起作用。所以我开发了自己的解决方案。
此代码使 elastislide 自动播放,当到达最后一张幻灯片时,它返回到第一张幻灯片,比无限循环轮播更符合人体工程学。
此代码应添加在 _initEvents
函数中 var self = this;
var translation = 0;
// width/height of an item ( <li> )
var itemSpace = this.options.orientation === 'horizontal' ? this.$items.outerWidth( true ) : this.$items.outerHeight( true );
// total width/height of the <ul>
var totalSpace = this.itemsCount * itemSpace;
// visible width/height
var visibleSpace = this.options.orientation === 'horizontal' ? this.$carousel.width() : this.$carousel.height();
//slide auto
window.setInterval(function(){
//test if we should go to next slide or return to first slide
if(totalSpace > translation + visibleSpace)
{
//go to next slide
self._slide('next');
//update translation
translation += visibleSpace;
}
else
{
//return to first slide (infinite loop is too bad for ergonomics)
self._slideTo(0);
//set translation to 0
translation = 0;
}
}, 7000);
关于javascript - 如何修改 Elastislide 使其无限循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10859998/