Question

我是网络开发领域的新手。

我正在创建一个网页。在主页上有一个javascript图像幻灯片请在这里查看：http://bluearrowsystems.com/index.php。现在滑块图像是自动移动的。但是当我将鼠标放在图像意味着鼠标悬停时，有没有办法移动图像？

以下是我的html head section javascript代码，我想但不确定，在本节中需要添加一个javascript代码。

<link rel="stylesheet" href="res/responsiveslides.css">
<link rel="stylesheet" href="res/example.css">
<script src="res/ga.js"></script>
<script src="res/jquery.js"></script>
<script>window.jQuery || document.write('<script src="http://viljamis.com/js/libs/jquery-
1.8.2.min.js"><\/script>')</script>
<script src="res/responsiveslides.js"></script>
<script>
$(function () {

  // Slideshow 1
  $(".rslides1").responsiveSlides({
    speed: 1000,
    maxwidth: 1024,                                     
    auto:false,



  });


      // Slideshow 2
  $(".rslides2").responsiveSlides({
    auto: true,
    pager: true,
    speed: 500,
    maxwidth: 540,

  });

});
</script>

Answer 1

您使用的插件没有从外部触发播放的方法。你可以使用像flexslider这样的其他插件。有了它，您将获得所需的功能：

$('.rslides1').flexslider().on('mouseover', function(){
    $(this).data('flexslider').next();
});

编辑：如果要在暂停状态下初始化flexslider并在鼠标悬停时开始播放，请使用以下代码：

$('.rslides1').flexslider( {slideshow: false} ).on('mouseover', function(){
    $(this).data('flexslider').play();
});

Javascript图像幻灯片问题

1 个答案: