1

我想在滑块到达最后一张图像时停止它。我正在使用 Cycle2 插件。如果我单击图像，它将滑动到下一个图像。一旦最后一个图像显示在窗口的右端，那么它将停止“下一次滑动”。我尝试了一些计算来停止滑块。注意：不应使用 opts.CarouselVisiblity 作为静态值。我的代码在这里，

<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>

任何人都可以告诉这个解决方案吗？请！

4

2 回答 2

2

使用Cycle2 API。如果当前幻灯片与幻灯片数量匹配，则暂停幻灯片放映：

$('#cycle-2').on('cycle-after', function (e, opts, API) {
    if (opts.currSlide === opts.slideCount) {
        $('#cycle-2').cycle('pause');
});
于 2013-03-27T11:21:56.780 回答
1

除了 PHearst 的回答之外，您可能还想将“data-cycle-loop”选项更改为 1。像这样：

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

使用“-1”，幻灯片将首先连续循环播放。( http://jquery.malsup.com/cycle2/api/ )

于 2014-02-19T15:51:03.617 回答