スライダーナビゲーションに問題があります。ページ上に他の順序付けられていないリンクのリストがない場合は、完全に正常に機能します。残念ながら、他の順序付けられていないリンクのリストがページに表示される場合、スライダーナビゲーションボタンが使用されるまでスライダーは正しく機能します。使用されると、スライドが消えて次のスライドを読み込めなくなります。
誰かが迅速な解決策を見つけることができますか?以下のコード:
楽しいもの:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.slider {
height: 320px;
position: relative;
}
.slider .slide {
display: none;
background: red;
position: absolute;
height: 320px;
width: 100%;
text-align: center;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.slider .slide:first').addClass('active').fadeIn(200);
function rotate(index) {
$('.slider .slide.active').removeClass('active').fadeOut(200, function() {
$('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200);
});
}
$('.slider-nav li a').click(function() {
var index = $(this).parent().index('li');
rotate(index);
return false;
});
setInterval(function() {
var $next = $('.slider .slide.active').next();
if ($next.length == 0)
$next = $('.slider .slide:first');
rotate($next.index());
}, 2000);
});
</script>
</head>
<body>
<ul>
<li><a href="#">Conflicting List Item</a></li>
<li><a href="#">Conflicting List Item</a></li>
<li><a href="#">Conflicting List Item</a></li>
<li><a href="#">Conflicting List Item</a></li>
</ul>
<div class="slider">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
</div>
<ul class="slider-nav">
<li><a href="#">Nav Slide 1</a></li>
<li><a href="#">Nav Slide 2</a></li>
<li><a href="#">Nav Slide 3</a></li>
<li><a href="#">Nav Slide 4</a></li>
</ul>
</body>
</html>
編集:今コードで!