0

滑块导航有问题。当页面上没有其他无序列表的链接时工作得很好；不幸的是，如果页面上出现任何其他无序列表的链接，滑块会正常工作，直到使用滑块导航按钮，在这种情况下，幻灯片会消失并且无法加载下一张幻灯片。

谁能找到一个快速的解决方案？下面的代码：

http://jsfiddle.net/jtCSA/2/

好玩的东西： 

<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>

编辑：现在有代码！

4

1 回答 1

0

就这么简单：var index = $(this).parent().index('li');改成var index = $(this).parent().index();

于 2012-06-14T14:07:47.673 回答