使用 cbpFWSlider 自动播放 JQuery 幻灯片答案

【问题标题】：Autoplay JQuery slideshow Using cbpFWSlider使用 cbpFWSlider 自动播放 JQuery 幻灯片
【发布时间】：2013-11-24 12:01:24
【问题描述】：

我正在使用 cbpFWSlider，但它似乎没有包含自动播放选项。我对 Jquery 很陌生，并且已经用谷歌搜索到了天堂，但还没有找到解决方案。这是可以添加的东西吗？开源脚本在这里： http://tympanus.net/codrops/2013/02/26/full-width-image-slider/

【问题讨论】：

标签： jquery slideshow

【解决方案1】：

您可以在右（或左）按钮中设置点击事件

    $('document').ready(function(){
                // init slider
                $('#cbp-fwslider').cbpFWSlider();

               /**
                     Set a 3 seconds interval
                     if next button is visible (so is not the last slide)  click next button
                     else it finds first dot and click it to start from the 1st slide
                **/
                setInterval( function(){
                    if($('.cbp-fwnext').is(":visible"))
                        {
                            $('.cbp-fwnext').click();   


                }
                else{
                        $('.cbp-fwdots').find('span').click();
                    }
            } ,3000 );
        });

【讨论】：

【解决方案2】：

这对我有用。

$('document').ready(function(){ // 初始化滑块 $('#cbp-fwslider').cbpFWSlider(); /**如果下一个按钮可见，则设置 3 秒间隔（所以不是最后一个slide) 单击下一个按钮，否则它会找到第一个点并单击它以从第一张幻灯片开始**/ setInterval( function(){ if($('.cbp-fwnext').is(":visible")){ $ ('.cbp-fwnext').click(); }else{ //查找span元素 $('.cbp-fwdots').find("span").each(function(){ //检查是否所选跨度的类是 cbp-fwcurrent if( $(this).attr("class") == "cbp-fwcurrent" ){ //检查span是否是最后一个元素然后重置否则继续 if( $(this).is(':last-child') ){ $('.cbp-fwdots').find('span').click(); }别的{ $(this).next().click(); } } }) } } ,3000 ); });

【讨论】：

【解决方案3】：

$('document').ready(function(){
$('#cbp-fwslider').cbpFWSlider();
setInterval( function(){
    if($('.cbp-fwdots').find('span:last').hasClass('cbp-fwcurrent')){
        $('.cbp-fwdots').find('span:first-child').click();
    }else{ $('.cbp-fwnext').click();}} ,3000 );});

用于返回第一个跨度（span:first-child）bucle无限

【讨论】：

【解决方案4】：

检查这个，无限

$('document').ready(function(){
    $('#cbp-fwslider').cbpFWSlider();
    setInterval( function(){
        if($('.cbp-fwdots').find('span:last').hasClass('cbp-fwcurrent'))
            {
            $('.cbp-fwdots').find('span').click();
    }
    else{
                $('.cbp-fwnext').click();   
        }
} ,3000 );});

【讨论】：

【解决方案5】：

    $(".banner-slides").hide();
    $(".banner-slides").first().show();
    $(".banner-slides.visible").show();
    $(".ri-arro").click(function(){
        var ne = $(this).parents(".banner-container").find(".banner-slides.visible").next('.banner-slides');
        var pne = $(this).parents(".banner-container").find(".pagination-box ul li.selected").next('li');
        //var ne_p = $(".banner-slider.visible").prev('.banner-slider');
        if(ne.length>0)
        {
            $(this).parents(".banner-container").find(".banner-slides.visible").hide().removeClass('visible');
            $(this).parents(".banner-container").find(".pagination-box ul li.selected").removeClass('selected');
            ne.addClass('visible').fadeIn(1000);
            pne.addClass('selected');
        }
        else
        {
            $(this).parents(".banner-container").find(".banner-slides.visible").hide().removeClass('visible');
            $(this).parents(".banner-container").find(".pagination-box ul li.selected").removeClass('selected');
            $(this).parents(".banner-container").find(".banner-slides").first().addClass('visible').fadeIn(1000);
            $(this).parents(".banner-container").find(".pagination-box ul li").first().addClass('selected');
        }

    });

    $(".pagination-box li").live('click',function(){

        var ele = $(this);
        var ind = $(".pagination-box ul li").index(ele);
        //alert(ind);
        $(this).parents('.banner').find(".banner-slides.visible").hide().removeClass('visible');
        $(this).parents('.banner').find('.banner-slides').eq(ind).fadeIn(1000).addClass('visible');
        $(".pagination-box ul li.selected").removeClass('selected');
        $(this).addClass('selected');
    });
    for(i=0;i<$(".banner-slides").length;i++)
    {
        if(i==0)
        $(".pagination-box ul").append('<li class="selected"></li>');
        else
        $(".pagination-box ul").append('<li></li>');
    }
    var timer = 0;
    function autoslide(){
        var ne = $(this).parents(".banner-container").find(".banner-slides.visible").next('.banner-slides');
        var pne = $(this).parents(".banner-container").find(".pagination-box ul li.selected").next('li');
        //var ne_p = $(".banner-slider.visible").prev('.banner-slider');
        if(ne.length>0)
        {
            $(this).parents(".banner-container").find(".banner-slides.visible").hide().removeClass('visible');
            $(this).parents(".banner-container").find(".pagination-box ul li.selected").removeClass('selected');
            ne.addClass('visible').fadeIn(1000);
            pne.addClass('selected');
        }
        else
        {
            $(this).parents(".banner-container").find(".banner-slides.visible").hide().removeClass('visible');
            $(this).parents(".banner-container").find(".banner-slides").first().addClass('visible').fadeIn(1000);
            $(this).parents(".banner-container").find(".pagination-box ul li.selected").removeClass('selected');
            $(this).parents(".banner-container").find(".pagination-box ul li").first().addClass('selected');
        }
        if(timer)
        timer = setTimeout(function(){autoslide();}, 1000);
    }
    if($(".banner-container").hasClass('autoslide'))
    timer = setTimeout(function(){autoslide();}, 1000);

    $(".le-arro").click(function(){
        var ne = $(this).parents(".banner-container").find(".banner-slides.visible").prev('.banner-slides');
        //var ne_p = $(".banner-slider.visible").next('.banner-slider');
        var pne =  $(this).parents(".banner-container").find(".pagination-box ul li.selected").prev('li');
        if(ne.length)
        {
            $(this).parents(".banner-container").find(".banner-slides.visible").fadeOut(500).removeClass('visible');
            $(this).parents(".banner-container").find(".pagination-box ul li.selected").removeClass('selected');
            ne.addClass('visible').fadeIn(1000);
            pne.addClass('selected');
        }
        else
        {
            $(this).parents(".banner-container").find(".banner-slides.visible").fadeOut(500).removeClass('visible');
            $(this).parents(".banner-container").find(".pagination-box ul li.selected").removeClass('selected');
            $(this).parents(".banner-container").find(".banner-slides").last().addClass('visible').fadeIn(1000);
            $(this).parents(".banner-container").find(".pagination-box ul li").last().addClass('selected');
        }


    });

/****************Banner Css Start******************/
.banner { width:100%; height:598px; position:relative; overflow: hidden;-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);}
.banner.app { height:500px;}

.banner .banner-img {/*width:100%;*/ height:100%;}
.banner .banner-text { position:absolute; top:0px; left:5%; width:55%; padding:87px 0 0 0}
.banner.event-page .banner-text.black-gradient {height:100%;box-sizing: border-box;top:0;
background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 15%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.6) 85%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(15%,rgba(0,0,0,0.6)), color-stop(50%,rgba(0,0,0,0.6)), color-stop(85%,rgba(0,0,0,0.6)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 15%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.6) 85%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 15%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.6) 85%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 15%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.6) 85%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 15%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.6) 85%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */}
.banner-text.black-gradient .event-logo { margin-bottom:10px; display:block;}

.banner.app .banner-text { width:50%; padding:90px 0 0 0}
.banner .banner-text h1 { font-size:35px; color:#f29200; text-transform:uppercase;}
.banner.event-page .banner-text h1, .banner.event-page .banner-text h2 { color:#fff;}
.banner.event-page .banner-text h1 { text-transform:none;font-family: 'Open Sans Light';}
.banner.app .banner-text h1, .fix-banner .banner-text h1 { color:#f29200; text-transform:none; font-family: 'Open Sans Light';}
.banner .banner-text h2 {font-family: 'Open Sans Light'; font-size:25px; color:#000;}
.banner.app .banner-text h2, .fix-banner .banner-text h2 {font-family: 'Open Sans Light'; font-size:20px; color:#212121;}
.watch-btn { font-size:15px; width:auto; color:#fff; padding:15px 30px; display:inline-block; margin-top:15px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; background-position-X:90%; text-transform:uppercase; background:#f29200; /*background: #f29200;*/}
.watch-btn img {vertical-align: bottom;margin-left: 6px;}
.banner .banner-container .le-arro {position: absolute;top: 0;bottom: 0;left: 1.5%;margin: auto;width: 31px;height: 98px;}
.banner .banner-container .ri-arro {position: absolute;top: 0;bottom: 0;right: 1.5%;margin: auto;width: 31px;height: 98px;}
.banner .banner-container .pagination-box { position:absolute; bottom:20px; width:100%; text-align:center;}
.banner .banner-container .pagination-box ul li { display:inline-block;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px; background:#fff; width:12px; height:12px;margin:0 8px;-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); cursor:pointer}
.banner .banner-container .pagination-box ul li.selected { background:#91ba36}

.banner .banner-sidebar { width:310px; /*height:548px;*/  padding: /*50px 0 0*/ 0; background: rgba(16,100,181,0.92); position:absolute; top:0; bottom:0; right:5%;box-sizing: border-box;}
.banner .banner-sidebar .box-1 { padding: 40px 0 0 0px; border-bottom:-webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));}
.banner .banner-sidebar .box-1 h3 { font-family: 'Open Sans Light'; font-size: 18px; color:#fff; text-transform: uppercase; text-align: center; font-weight: bold; letter-spacing: 0.5px;}
.banner .banner-sidebar .box { padding:40px 20px; border-bottom:-webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));}
.banner .banner-sidebar .box a:hover h3, .banner .banner-sidebar .box a:hover p {color:#c6f0ff}

.banner .banner-sidebar .box.first-box p { background:url(../images/enterprise-icon.png) no-repeat 0 5px;}
.banner .banner-sidebar .box.second-box p { background:url(../images/internal-icon.png) no-repeat 0 5px;}
.banner .banner-sidebar .box.three-box p { background:url(../images/compliance-icon.png) no-repeat 0 5px;}

.banner .banner-sidebar .box.first-box a:hover p { background:url(../images/enterprise-icon-hover.png) no-repeat 0 5px;}
.banner .banner-sidebar .box.second-box a:hover p { background:url(../images/internal-icon-hover.png) no-repeat 0 5px;}
.banner .banner-sidebar .box.three-box a:hover p { background:url(../images/compliance-icon-hover.png) no-repeat 0 5px;}


.banner .banner-sidebar h3 { font-family: 'Open Sans Light';font-size:20px; color:#fff; text-transform:inherit;}
.banner .banner-sidebar p {font-family: 'Open Sans Light'; font-size:15px; color:#fff; margin-top:20px; padding:0 0 0 40px;}
.banner .banner-sidebar p img { float:left; margin-right:10px; margin-top: 4px; vertical-align:middle;}
.banner .banner-sidebar hr { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, rgba(147,183,218,0.2), rgba(147,183,218,99), rgba(147,183,218,0.2)); background-image:    -moz-linear-gradient(left, rgba(147,183,218,0.2), rgba(147,183,218,99), rgba(147,183,218,0.2)); background-image:     -ms-linear-gradient(left, rgba(147,183,218,0.2), rgba(147,183,218,99), rgba(147,183,218,0.2)); background-image:      -o-linear-gradient(left, rgba(147,183,218,0.2), rgba(147,183,218,99), rgba(147,183,218,0.2)); -webkit-box-shadow: 0px 1px 1px 0px rgba(0,76,149,0.05); -moz-box-shadow: 0px 1px 1px 0px rgba(0,76,149,0.05); box-shadow: 0px 1px 1px 0px rgba(0,76,149,0.05); }

<div class="banner">
        <div class="banner-container ">
            <span class="le-arro"><a href="javascript:;"><img src="images/left-arrow-thin.png" /></a></span>
            <div class="banner-slides">
                <img class="banner-img" src="http://msi-vmwebmsi.metricstream.com/metricstream/sites/default/files/Home-Banner-ORM.jpg" />
                <div class="banner-text">
                    <h1>Unifying audit and data repositories</h1>
                    <h2>Simplifying ERM for Société Générale.</h2>
                    <a href="" class="watch-btn btn-bcg-orange">WATCH <img src="images/watch-more-icon.png" /></a>
                </div>
            </div>

            <div class="banner-slides">
                <img class="banner-img" src="http://msi-vmwebmsi.metricstream.com/metricstream/sites/default/files/Home-Banner44_1.jpg" />
                <div class="banner-text">
                    <h1>Slide 2</h1>
                    <h2>Simplifying ERM for Société Générale.</h2>
                    <a href="" class="watch-btn btn-bcg-orange">WATCH <img src="images/watch-more-icon.png" /></a>
                </div>
            </div>
            <div class="banner-slides">
                <img class="banner-img" src="http://msi-vmwebmsi.metricstream.com/metricstream/sites/default/files/zurich%20home%20banner_2_0.jpg" />
                <div class="banner-text">
                    <h1>Slide 3</h1>
                    <h2>Simplifying ERM for Société Générale.</h2>
                    <a href="" class="watch-btn btn-bcg-orange">WATCH <img src="images/watch-more-icon.png" /></a>
                </div>
            </div>
            <div class="banner-slides">
                <img class="banner-img" src="images/banners/banner_01.jpg" />
                <div class="banner-text">
                    <h1>Slide 4</h1>
                    <h2>Simplifying ERM for Société Générale.</h2>
                    <a href="" class="watch-btn btn-bcg-orange">WATCH <img src="images/watch-more-icon.png" /></a>
                </div>
            </div>
            <span class="ri-arro"><a href="javascript:;"><img src="images/right-arrow-thin.png" /></a></span>
            <div class="pagination-box">
                <ul class="no-li">

                </ul>
            </div>
        </div>


</div>

【讨论】：