Question

没有jquery背景，只想为Dreamweaver构建一个简单的轮播网站。所有工作都很好但是 - 当您单击下一个/上一个箭头以向前/向后移动幻灯片时，在将光标移离滑块（箭头消失）时，图像会卡在您查看的最后一个图像上而不是继续/恢复运行一个滑块。这是否意味着发生？如果是这样，有没有办法让它恢复＆＃39;？感谢

Answer 1

您可以在js代码中尝试：

解决方案1：

$('.flex-next').on('click',function () {
    $('.flexslider').flexslider("play");
});
$('.flex-prev').on('click',function () {
    $('.flexslider').flexslider("play");
});

演示：http://jsfiddle.net/lotusgodkk/n9JUc/22/

解决方案2 ：在flexslider初始化代码中添加此内容。

after: function (slider) {            
        if (!slider.playing) {
            slider.play();
        }
    }

演示：http://jsfiddle.net/lotusgodkk/n9JUc/23/

基本上，只要点击下一个/上一个按钮，我们就会调用play方法，其中.flex-next和.flex-prev是下一个和上一个按钮上的类。

在您的网站中，您使用过：

$(window).load(function () {
    $('.flexslider').flexslider();
});
$('.flex-next').on('click', function () {
    $('.flexslider').flexslider("play");
});
$('.flex-prev').on('click', function () {
    $('.flexslider').flexslider("play");
});

相反，只需使用此代码：

    $(document).ready(function () {
    $('.flexslider').flexslider({
        after: function (slider) {
            if (!slider.playing) {
                slider.play();
            }
        }
    });
});

使用$（document）.ready而不是$（window）.load

Answer 2

尝试将pauseOnAction参数设置为false：

$(document).ready(function () {
    $('.flexslider').flexslider({
        pauseOnAction: false
    });
});

Answer 3

$('.flexslider').flexslider({
   animation: "slide",
   slideshowSpeed: 1000,
   start: function(slider) {
      $('body').removeClass('loading');
   },
   after: function (slider) {
      if (!slider.playing) {
        slider.play();
      }
   }
});

使用下一个/上一个控件后，Flexslider滑动不会恢复

3 个答案: