基本的に、jqueryを使用してスライドショーを作成しようとしています。ここでは、スライドショーのナビゲーションは正常に機能していますが、スライドショーのループは機能していません。
私はここで私のjsfiddle
を試しました。
私のスクリプトは次のとおりです。
var currIndex = -1;
function slideshow(slideshowId){
var len=$("ul#"+slideshowId+" li.slides").length;
currIndex = (currIndex + 1) % len;
$("ul#"+slideshowId+" li.slides").hide();
$("ul#"+slideshowId+" li.slide"+currIndex+"").fadeIn();
}
function slidepagenation(slideshowId,slideno){
$("ul#"+slideshowId+" li.slides").hide();
$("ul#"+slideshowId+" li.slide"+slideno+"").fadeIn();
currIndex = slideno;
}
var tshone = 0;
var tshtwo = 0;
slideshow('slideshow-one');
tshone =setInterval(slideshow('slideshow-one'), 500);
slideshow('slideshow-two');
tshtwo =setInterval(slideshow('slideshow-two'), 500);
$('ul.slideshow-one li a').click(function(){
clearInterval(tshone);
var element = $(this);
var slideshowid=element.parent().parent().attr('class');
var slideno = $("ul.slideshow-one li a").index($(this));
slidepagenation(slideshowid,slideno);
});
$('ul.slideshow-two li a').click(function(){
clearInterval(tshtwo);
var element = $(this);
var slideshowid=element.parent().parent().attr('class');
var slideno = $("ul.slideshow-two li a").index($(this));
slidepagenation(slideshowid,slideno);
});
私のhtmlはここにあります:
<ul class="slideshow" id="slideshow-one">
<li class="slides slide0" style="display:block">
Slide one
</li>
<li class="slides slide1">
Slide two
</li>
<li class="slides slide2">
Slide three
</li>
</ul>
<div class="full-length clearfix txt-center">
<ul class="slideshow-one">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ul>
</div>
<br><br>
<ul class="slideshow" id="slideshow-two">
<li class="slides slide0" style="display:block">
Slide one
</li>
<li class="slides slide1">
Slide two
</li>
</ul>
<div class="full-length clearfix txt-center">
<ul class="slideshow-two">
<li><a>1</a></li>
<li><a>2</a></li>
</ul>
</div>
</p>