Question

我正在使用ELASTISLIDE – A RESPONSIVE JQUERY CAROUSEL PLUGIN 该插件在我的网站上完美运行。但我需要在鼠标悬停时停止滑动

的代码

// autoplay true || false
autoplay : true,

和

if(this.options.autoplay == true){
            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
                    self._slideTo(0);
                    //set translation to 0
                    translation = 0;
                }
            }, 7000);
        }

感谢您的帮助

Answer 1

1：为计时器添加变量..

var slide_timer; // Add variable to component

2：将window.setInterval部分移动到自己的函数（startAutoslide）并将值赋给slide_timer，如：

slide_timer = window.setInterval(function()...

3：为组件添加onmouseover和onmouseout侦听器。在鼠标悬停时调用clearInterval(slide_timer)和onmouseout调用startAutoslide。

Jquery - 当鼠标覆盖时，弹性滑动停止滑动

1 个答案: