自动播放JQuery幻灯片使用cbpFWSlider
我正在使用cbpFWSlider，它似乎没有包含autoplay选项。 我对Jquery很新，并且已经Google搜索到了天堂，但尚未找到解决方案。 这是可以添加的东西吗？ 开源脚本在这里： http ： //tympanus.net/codrops/2013/02/26/full-width-image-slider/
您可以在右（或左）按钮中设置单击事件
$('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 ); }); 这对我有用。
$（’document’）。ready（function（）{// init slider $（’＃cbp-fwslider’）。cbpFWSlider（）; / **如果下一个按钮可见，则设置3秒间隔（因此不是最后一个）幻灯片）点击下一个按钮，否则它找到第一个点并点击它从第一个幻灯片开始** / 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”）{//检查范围是否是最后一个元素然后重置否则继续if（$（this ）.is（’：last-child’））{$（’。cbp-fwdots’）。find（’span’）。click（）;} else {$（this）.next（）。click（）; }}}}}}，3000）;}）;
$('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无限
检查这个，无限
$('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 );});
$(".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(''); else $(".pagination-box ul").append(''); } 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); }
