jquery停止cycle2插件滑块

Question

I want to stop the slider once it reaches the last image. 我想在滑块到达最后一张图像后停止它。 I'm using the Cycle2 plugin. 我正在使用Cycle2插件。 If I click the image it will slide to next image. 如果我单击图像，它将滑动到下一个图像。 Once the last image is showing in the right end of the window, then it will be stop the 'next sliding'. 一旦最后一个图像显示在窗口的右端，那么它将停止“下一次滑动”。 I tried some calculation to stop the slider. 我尝试了一些计算来停止滑块。 Note: sholud not use opts.CarouselVisiblity as static value. 注意：sholud不使用opts.CarouselVisiblity作为静态值。 My code is here, 我的代码在这里，

<html>
<head>
<style>     
#cycle-2 .cycle-slide { border:3px solid #fff; }
#cycle-2 .cycle-slide-active { border:3px solid #004; }
#slideshow{width: 100%;max-width:100%;margin: auto}
.cycleimg{width:auto;height:60px;}
.cycle-slideshow img {height: 60px; display: block; }
.cycle-pager-active{visibility:hidden !important;}
/*.addleft{left:-792px!important;}*/
</style>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.carousel.js"></script>
<script>
jQuery(document).ready(function(){
             winlastimg=calc_func();
             //alert(winlastimg);
            $(window).load(function()
             {              
        var winlastimg; 
        winlastimg=calc_func(); 
        //alert(winlastimg);
    });
    $('.cycle-slideshow').cycle('stop');
    var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
        slideshows.not(this).cycle('goto', opts.currSlide);         
    });
           var behindcount=0;
    var prevativeimgcount=0;
    $('#cycle-2 .cycle-slide').click(function(){
        var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
        var activeid=$(".cycle-slide-active").find('img').attr("id");
        var lastid=$(".cycle-slideshow div").find("img:last").attr("id");
        var firstid=$(".cycle-slideshow img").first().attr("id");
            var t=calc_func();
                    var activewinimcount=t+index;
                var lastimgindex=$(".cycle-slideshow div img").length-1;
                if(activewinimcount <= lastimgindex)
                {       
                    prevativeimgcount=activewinimcount
                    behindcount=lastimgindex-activewinimcount;
                    slideshows.cycle('goto', index);                        
                }                                       
                else
                {
                    //alert(prevativeimgcount);
                    //var i1=prevativeimgcount+behindcount;
                    //alert(i1);
                    //slideshows.cycle('goto', index); 
                    var i1=lastimgindex-index;
                    $('.cycle-slideshow').cycle('goto',i1);
                    //alert(i1);
                    //$(".cycle-carousel-wrap").stop();
                }
    });          
}); 
function calc_func()
{
    var l=0;    
    var num_of_img=1;   
    var imgwid=0;
    var ww=$(window).width();
    //$('.cycle-slideshow img').load(function(){
    $('.cycle-slideshow').find('img').each(function() {
        imgwid =imgwid + $(this).width()+10;
        var j=imgwid;           
        if(j<=ww)
        {
            num_of_img++;       
            j+=imgwid;              
        }   
        else
            return false;           
    });
    return num_of_img;
    //});

}   
</script>
</head>
<body>
<div class="hello">
<div id="slideshow">
<div id="cycle-2" class="cycle-slideshow"  data-cycle-slides="> div" data-cycle-timeout="0"
    data-cycle-prev="#prev"
    data-cycle-next="#next"
data-cycle-pager="#pag"
    data-cycle-caption=".custom-caption"
    data-cycle-caption-template="Slide {{slideNum}} of {{slideCount}}"
    data-cycle-fx="carousel"
    data-cycle-carousel-fluid="true"
data-cycle-log="false"
 data-cycle-pause-on-hover="true"
data-cycle-loop="-1"
    data-cycle-allow-wrap="false">
    <div><img class="cycleimg" id="1" src="http://malsup.github.com/images/beach1.jpg"></div>
    <div><img class="cycleimg" id="2" src="http://malsup.github.com/images/beach2.jpg"></div>
    <div><img class="cycleimg" id="3" src="http://malsup.github.com/images/beach3.jpg"></div>
    <div><img class="cycleimg" id="4" src="http://malsup.github.com/images/beach4.jpg"></div>
    <div><img class="cycleimg" id="5" src="http://malsup.github.com/images/beach1.jpg"></div>
    <div><img class="cycleimg" id="6" src="http://malsup.github.com/images/beach2.jpg"></div>
    <div><img class="cycleimg" id="7" src="http://malsup.github.com/images/beach3.jpg"></div>
    <div><img class="cycleimg" id="8" src="http://malsup.github.com/images/beach4.jpg"></div>
<div><img class="cycleimg" id="9" src="http://malsup.github.com/images/beach1.jpg"></div>
    <div><img class="cycleimg" id="10" src="http://malsup.github.com/images/beach2.jpg"></div>
    <div><img class="cycleimg" id="11" src="http://malsup.github.com/images/beach3.jpg"></div>
    <div><img class="cycleimg" id="12" src="http://malsup.github.com/images/beach4.jpg"></div>
<div><img class="cycleimg" id="13" src="http://malsup.github.com/images/beach1.jpg"></div>
    <div><img class="cycleimg" id="14" src="http://malsup.github.com/images/beach2.jpg"></div>
    <div><img class="cycleimg" id="15" src="http://malsup.github.com/images/beach3.jpg"></div>
    <div><img class="cycleimg" id="16" src="http://malsup.github.com/images/beach4.jpg"></div>
<div><img class="cycleimg" id="17" src="http://malsup.github.com/images/beach1.jpg"></div>
    <div><img class="cycleimg" id="18" src="http://malsup.github.com/images/beach2.jpg"></div>
    <div><img class="cycleimg" id="19" src="http://malsup.github.com/images/beach3.jpg"></div>
    <div><img class="cycleimg" id="20" src="http://malsup.github.com/images/beach4.jpg"></div>
<div><img class="cycleimg" id="21" src="http://malsup.github.com/images/beach1.jpg"></div>
    <div><img class="cycleimg" id="22" src="http://malsup.github.com/images/beach2.jpg"></div>
    <div><img class="cycleimg" id="23" src="http://malsup.github.com/images/beach3.jpg"></div>
    <div><img class="cycleimg" id="24" src="http://malsup.github.com/images/beach4.jpg"></div>
<div><img class="cycleimg" id="25" src="http://malsup.github.com/images/beach1.jpg"></div>
    <div><img class="cycleimg" id="26"src="http://malsup.github.com/images/beach2.jpg"></div>
    <div><img class="cycleimg" id="27" src="http://malsup.github.com/images/beach3.jpg"></div>
    <div><img class="cycleimg" id="28" src="http://malsup.github.com/images/beach4.jpg"></div>
<div><img class="cycleimg" id="29" src="http://malsup.github.com/images/beach1.jpg"></div>
    <div><img class="cycleimg" id="30" src="http://malsup.github.com/images/beach2.jpg"></div>
    <div><img class="cycleimg" id="31" src="http://malsup.github.com/images/beach3.jpg"></div>
    <div><img class="cycleimg" id="32" src="http://malsup.github.com/images/beach4.jpg"></div>
</div>
</div>
</div>
<p>
        <a href="#" id=prev class="cycle-prev">&laquo; prev</a> | <a href="#" id=next class="cycle-next">next &raquo;</a>
        <span class="custom-caption"></span>
    </p>
<div style="visiblity:hidden !important;" id="pag"></div>
</body>
</html>

Any one can tell the solution for this? 任何人都可以告诉解决方案吗？ Please! 请！

Answer 1

Using the Cycle2 API . 使用Cycle2 API 。 If the current slide matches the number of slides, then pause the slideshow: 如果当前幻灯片与幻灯片数量匹配，则暂停幻灯片放映：

$('#cycle-2').on('cycle-after', function (e, opts, API) {
    if (opts.currSlide === opts.slideCount) {
        $('#cycle-2').cycle('pause');
});

Answer 2

In addition to PHearst's answer, you might want to change your "data-cycle-loop" option to 1. Like so: 除了PHearst的答案，您可能希望将“data-cycle-loop”选项更改为1.如下所示：

<div id="cycle-2" class="cycle-slideshow" data-cycle-slides="> div" 
    ....
    data-cycle-loop="1" 
>

With "-1" the slideshow will loop continuously in the first place. 使用“-1”时，幻灯片将首先连续循环播放。 ( http://jquery.malsup.com/cycle2/api/ ) （ http://jquery.malsup.com/cycle2/api/ ）

jquery停止cycle2插件滑块

问题描述

2 个解决方案

解决方案1
2 2013-03-27 11:21:56

解决方案2
1 2014-02-19 15:51:03

jquery停止cycle2插件滑块

问题描述

2 个解决方案

解决方案1 2 2013-03-27 11:21:56

解决方案2 1 2014-02-19 15:51:03

解决方案1
2 2013-03-27 11:21:56

解决方案2
1 2014-02-19 15:51:03