如何修改Elastislide，使其无限循环

本文介绍了如何修改Elastislide，使其无限循环的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我一直在寻找一个可同时显示多个图像，反应灵敏并无限循环的图像轮播。I've been searching for an image carousel that will display several images at once, is responsive and loops infinitely. Elastislide似乎是最合适的（ http://tympanus.net/Development/Elastislide/index2.html ）。 Elastislide seems to be the most suitable ( http://tympanus.net/Development/Elastislide/index2.html ). 我能够找到的唯一其他实用选择是John Nikolakis的Liquid Carousel，它似乎年代久远，不太优雅。The only other practical option I've been able to find is Liquid Carousel by John Nikolakis which seems to be a fair bit older and less elegant.我使用与 http://www.w3schools.com/js/js_timing.asp ，但是一旦到达终点，它就会停止，因为计时只是调用下一个按钮（.es-nav-next）。I've got Elastislide to autoplay (sort of), using a similar method to the The clearTimeout() Method shown at http://www.w3schools.com/js/js_timing.asp, but once it reaches the end it stops, as the timing is just calling the next button (.es-nav-next).我希望有人可以帮助我修改Elastislide以使其无限循环-或愿意接受有关满足我的3个要求的其他解决方案（上面列出）。I'm hoping someone can help me with modifying Elastislide to make it loop infinitely - or I'm open to suggestions for a different solution which meets my 3 requirements (listed above).目前，我正在本地安装OpenCart，但可以提供一个静态示例并提供At the moment I'm working on a local installation of OpenCart but I can put up a static sample and provide a link if that helps.任何帮助或建议都将不胜感激，因为我是javascript的业余爱好者，因此在此上花了很多时间： ）Any help or advice would be greatly appreciated, have spent many hours on this so far as I'm a complete amateur at javascript :)推荐答案 Elastislide代码已经发展，上述解决方案不起作用。因此，我开发了自己的解决方案。Elastislide code has evolved and the above solution does not work. So I have developed my own solution.此代码可以自动播放elastislide，并且在到达最后一张幻灯片时，它比起无限循环卡罗素更符合人体工程学。 This code makes elastislide autoplay and when arrived at last slide it returns to the first slide to be more ergonomic than the infinite loop caroussel.此代码应在var self = this; _initEvents 函数中； / code> This code should be added in the _initEvents function after 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/heightvar visibleSpace = this.options.orientation === 'horizontal' ? this.$carousel.width() : this.$carousel.height();//slide autowindow.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); 这篇关于如何修改Elastislide，使其无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！