Question

我在我的网站上使用bxslider作为实时源，就像在共享的网站上一样。每20秒从服务器刷新源的内容。要求是在鼠标悬停时停止滑块。这是使用bxslider的ticker hover选项实现的，但这只适用于第一次加载，并且在从服务器刷新内容后无效。

以下是第一次加载的代码以及从服务器加载内容后的代码。

首次加载：

    var slider  = $('.bxslider2').bxSlider({
    minSlides: 1,
    maxSlides: 5,
    slideWidth: 285,
    moveSlides: 1,
    slideMargin: 20,
    ticker: true,
    speed: 70000,
    tickerHover:true,
    useCSS: false
});

第二次加载时，代码为：

function startRefresh() {
    var timerId = setInterval(function(){ 
        dataService.get_live_feeds( function (res) {

          var currentdate = new Date();
          $('.rates-head .top_feeds').attr('data-original-title','Last Updated : '+currentdate.getHours() + ":"+ currentdate.getMinutes() + ":" + currentdate.getSeconds());

            var obj = '';
            for(var i in res)
            {
                if(i == 'USD' || i == 'EUR' || i == 'GBP' || i == 'AED' || i == 'CNY' || i == 'THB' || i == 'JPY' || i == 'AUD' || i == 'CAD' || i == 'NZD' || i == 'SGD' || i == 'HKD')
                obj +='<li><span>'+i+'</span><span>'+parseFloat(res[i]).toFixed(2)+'</span></li>';
            }
            $('.bxslider2').html(obj);
            slider.destroySlider();
            slider.reloadSlider({
                minSlides: 1,
                maxSlides: 5,
                slideWidth: 285,
                moveSlides: 1,
                slideMargin: 20,
                ticker: true,
                speed: 70000,
                tickerHover:true,
                useCSS: false
            });
        });
    },12000)
}

请告诉我，我做错了什么？

Answer 1

我想这个滑块正在使用jQuery的.on()函数，它可以在动态添加的元素上绑定事件。您可以使用带有选择器参数的.on()创建自己的悬停函数：

$('body').on('mouseover', '.bxslider2', function() {
  $(this).stopAuto();
}).on('mouseout', '.bxslider2', function() {
  $(this).startAuto();
});

我对stopAuto()和startAuto()方法并非100％肯定。我刚刚在这里快速浏览了bxSlider文档：http://bxslider.com/options

您还应该使用滑块的容器替换body。

使用ajax加载内容时，Ticker悬停不适用于悬停

1 个答案: