滑块导航和冲突ul> li> a

滑块导航有问题。如果页面上没有其他无序链接列表，则工作良好;不幸的是，如果页面上出现任何其他无序链接列表，滑块将正常运行，直到使用滑块导航按钮，在这种情况下，幻灯片消失并且无法加载下一张幻灯片。滑块导航和冲突ul> li> a

任何人都可以找到一个快速解决方案？下面的代码：

有趣的东西：

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

编辑：现在用的代码！

来源

2012-06-14 danpaquette

简单如此：将var index = $(this).parent().index('li');更改为var index = $(this).parent().index();

来源

2012-06-14 14:07:47 core1024

滑块导航和冲突ul> li> a

回答

相关问题