Question

我正在尝试在淡入淡出模式下滑动图像的功能。我尝试了这个，它不断循环。如何在这里停止循环。

 <script language="javascript">
$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
 .appendTo('#slideshow');  

 },  1000);

</script>

我在幻灯片中有三张图片。最后一张幻灯片正在重定向到第一张幻灯片。不断循环播放。我想从最后一张幻灯片重定向到谷歌页面。提前感谢您提出宝贵的建议。

Answer 1

 <script language="javascript">
var timer;
    $("#slideshow > div:gt(0)").hide();

    timer=setInterval(function() { 
      $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
     .appendTo('#slideshow');  

     },  1000);

    </script>

现在用于清除间隔

clearInterval(timer);

Ref

Answer 2

您可以将数据属性添加到要导航的幻灯片中：

<div id="slideshow">
    <div>
        <img src="http://lorempixel.com/280/280/technics/1/" />
    </div>
    <div>
        <img src="http://lorempixel.com/280/280/technics/2/" />
    </div>
    <div data-exturl="http://www.google.com">
        <img src="http://lorempixel.com/280/280/technics/3/" />
    </div>
</div>

在我的示例中，我在第三张幻灯片上设置了一个任意数据属性：data-exturl="http://www.google.com"

然后在代码中检查每张幻灯片上的属性，并导航属性是否存在：

var timerID;
$(document).on("pagecreate", "#page1", function () {
    $("#slideshow > div:gt(0)").hide();

    timerID = setInterval(function () {
        var curSlide = $('#slideshow > div:first');
        var extURL = curSlide.data("exturl");
        if (extURL && extURL.length > 0){
            clearInterval(timerID);
             //redirect to page
             //e.g window.location = extURL; or top.location = extURL;
        } else {
            curSlide
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
        }
    }, 3000);
});

<强> DEMO

如何在jquery mobile中滑动淡入淡出功能的循环

2 个答案: