文章/答案/技术大牛

发布

问jquery停止cycle2插件滑块
EN

Stack Overflow用户

提问于 2013-01-11 19:40:11

回答 2查看 4.8K关注 0票数 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>

谁能说出这个问题的解决方案？请!

jquery-cycle2

jquery

回答 2

Stack Overflow用户

发布于 2013-03-27 19:21:57

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

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

票数 2

Stack Overflow用户

发布于 2014-02-19 23:51:04

除了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/)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14277438

复制

相似问题

问jquery停止cycle2插件滑块
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery停止cycle2插件滑块EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery停止cycle2插件滑块
EN