要顯示的滑塊標題超出幻燈片

Question

我需要一個帶有字幕的滑塊，字幕顯示在幻燈片的外部，當顯示每張幻燈片時，相應的字幕應在外部突出顯示。 在下面給出的代碼中，該功能正常運行，但不是循環運行。 請幫忙。

 jQuery(document).ready(function($) { var interval; interval = setInterval(function() { moveRight(); }, 3000); $('._slider').mouseover(function() { clearInterval(interval); }); $('._slider').mouseleave(function() { interval = setInterval(function() { moveRight(); }, 3000); }); var slideCount = $('._slider ul li').length; var slideWidth = $('._slider ul li').width(); var slideHeight = $('._slider ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('._slider').css({ width: slideWidth, height: slideHeight }); $('._slider ul').css({ width: sliderUlWidth, marginLeft: -slideWidth }); $('._slider ul li:last-child').prependTo('._slider ul'); function moveLeft() { $('._slider ul').animate({ left: +slideWidth }, 200, function() { $('._slider ul li:last-child').prependTo('._slider ul'); $('._slider ul').css('left', ''); }); var li = $(".caption-slider li.active").prev(); $(".caption-slider li").removeClass("active"); li.addClass("active"); }; function moveRight() { $('._slider ul').animate({ left: -slideWidth }, 200, function() { $('._slider ul li:first-child').appendTo('._slider ul'); $('._slider ul').css('left', ''); }); var li = $(".caption-slider li.active").next(); $(".caption-slider li").removeClass("active"); li.addClass("active"); }; $('._slider_prev').click(function() { moveLeft(); return false; }); $('._slider_next').click(function() { moveRight(); return false; }); }); 

 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600); html { border-top: 5px solid #fff; background: #efefef; color: #2a2a2a; } html, body { margin: 0; padding: 0; font-family: 'Open Sans'; } h1 { margin-left: 15px; } ._slider { position: relative; overflow: hidden; margin-left: 15px; } ._slider:hover ._slider_next, ._slider:hover ._slider_prev { display: block; } ._slider_next, ._slider_prev { position: absolute; top: 35%; z-index: 999; display: none; width: auto; height: auto; padding: 2% 4%; background: #000; color: #fff; text-decoration: none; font-weight: 600; font-size: 2em; opacity: 0.8; cursor: pointer; } ._slider_next:hover, ._slider_prev:hover { opacity: 1; -webkit-transition: all 0.2s ease; } ._slider_next { right: 0; } ._slider ul { position: relative; height: 500px; margin: 0; padding: 0; list-style: none; } ._slider ul li { float: left; margin: 0; padding: 0; position: relative; background: #ccc; display: block; width: 500px; line-height: 200px; text-align: center; } .caption-slider li { list-style-type: none; display: inline; } .caption-slider li.active { color: #3F51B5; text-decoration: underline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <ul class="caption-slider"> <li class="active">Caption1</li> <li>Caption2</li> <li>Caption3</li> <li>Caption4</li> <ul> <div class="_slider"> <a href="#" class="_slider_next">&#10095;</a> <a href="#" class="_slider_prev">&#10094;</a> <ul> <li>SLIDE 1</li> <li>SLIDE 2</li> <li>SLIDE 3</li> <li>SLIDE 4</li> </ul> </div> 

Answer 1

首先，您有一個HTML錯誤，您沒有正確關閉<ul class="caption-slider">

要使循環正常工作，您需要檢查是否已到達最后一個/第一個元素，然后移至第一個/最后一個。

在function moveLeft()您需要在li.addClass("active")之前添加以下內容：

if (!li.length) { 
   li = $(".caption-slider li").last();
}

在function moveRight()您需要在li.addClass("active")之前添加以下內容：

if (!li.length) { 
   li = $(".caption-slider li").first();
}

請參見下面的代碼段：

 jQuery(document).ready(function($) { var interval; interval = setInterval(function() { moveRight(); }, 3000); $('._slider').mouseover(function() { clearInterval(interval); }); $('._slider').mouseleave(function() { interval = setInterval(function() { moveRight(); }, 3000); }); var slideCount = $('._slider ul li').length; var slideWidth = $('._slider ul li').width(); var slideHeight = $('._slider ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('._slider').css({ width: slideWidth, height: slideHeight }); $('._slider ul').css({ width: sliderUlWidth, marginLeft: -slideWidth }); $('._slider ul li:last-child').prependTo('._slider ul'); function moveLeft() { $('._slider ul').animate({ left: +slideWidth }, 200, function() { $('._slider ul li:last-child').prependTo('._slider ul'); $('._slider ul').css('left', ''); }); var li = $(".caption-slider li.active").prev(); $(".caption-slider li").removeClass("active"); if (!li.length) { li = $(".caption-slider li").last(); } li.addClass("active"); }; function moveRight() { $('._slider ul').animate({ left: -slideWidth }, 200, function() { $('._slider ul li:first-child').appendTo('._slider ul'); $('._slider ul').css('left', ''); }); var li = $(".caption-slider li.active").next(); if (!li.length) { li = $(".caption-slider li").first(); } $(".caption-slider li").removeClass("active"); li.addClass("active"); }; $('._slider_prev').click(function() { moveLeft(); return false; }); $('._slider_next').click(function() { moveRight(); return false; }); }); 

 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600); html { border-top: 5px solid #fff; background: #efefef; color: #2a2a2a; } html, body { margin: 0; padding: 0; font-family: 'Open Sans'; } h1 { margin-left: 15px; } ._slider { position: relative; overflow: hidden; margin-left: 15px; } ._slider:hover ._slider_next, ._slider:hover ._slider_prev { display: block; } ._slider_next, ._slider_prev { position: absolute; top: 35%; z-index: 999; display: none; width: auto; height: auto; padding: 2% 4%; background: #000; color: #fff; text-decoration: none; font-weight: 600; font-size: 2em; opacity: 0.8; cursor: pointer; } ._slider_next:hover, ._slider_prev:hover { opacity: 1; -webkit-transition: all 0.2s ease; } ._slider_next { right: 0; } ._slider ul { position: relative; height: 500px; margin: 0; padding: 0; list-style: none; } ._slider ul li { float: left; margin: 0; padding: 0; position: relative; background: #ccc; display: block; width: 500px; line-height: 200px; text-align: center; } .caption-slider li { list-style-type: none; display: inline; } .caption-slider li.active { color: #3F51B5; text-decoration: underline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <ul class="caption-slider"> <li class="active">Caption1</li> <li>Caption2</li> <li>Caption3</li> <li>Caption4</li> </ul> <div class="_slider"> <a href="#" class="_slider_next">&#10095;</a> <a href="#" class="_slider_prev">&#10094;</a> <ul> <li>SLIDE 1</li> <li>SLIDE 2</li> <li>SLIDE 3</li> <li>SLIDE 4</li> </ul> </div>