滑块导航和冲突的 ul>li>a
Slider navigation and conflicting ul>li>a
滑块
导航有问题。当页面上没有其他无序列表时,工作正常;遗憾的是,如果页面上出现任何其他无序列表的链接,则在使用滑块导航按钮之前,滑块将正常工作,在这种情况下,幻灯片将消失并且无法加载下一张幻灯片。
任何人都可以找到快速的解决方案吗?代码如下:
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>
编辑:现在有代码!
就
这么简单:将var index = $(this).parent().index('li');
更改为var index = $(this).parent().index();
相关文章:
- 使用jquery动态创建ul-li
- 使用下拉列表筛选列表(ul>li)
- 隐藏/显示包含单词的ul li项目.但只能入住李的子女
- ul-li专属功能
- 在jQuery UI中获取ul和li值,拖放即可排序
- nextSibling ul li ul
- 如何在应用切换点击功能之前,默认情况下在页面加载时隐藏带有特定类的ul-li
- 有没有一种方法可以检测一行何时随着浮动左LI的UL而改变
- jQuery复选框(在ul>li下)检查事件
- 加载更多li's在ul-JQuery中
- 自动完成搜索无法正常工作,请不要迭代$中的所有元素.每个ul-li都会及时显示响应
- Javascript 从嵌套的 UL LI 复选框生成递归 JSON 对象
- 使用jquery在ul菜单中添加li dynamic
- 有角度的自动建议文本排版和html ul li下拉列表
- Jquery菜单UL LI插入
- 更改Jquery UL li筛选器中的链接颜色
- 如何在 li ul 中获取跨度动态值
- 如何获取所有LI UL元素ID值并将它们放置在JavaScript数组中
- 获取Ul-li宽度,并将其设置为Ul-li-Ul的宽度
- 如何创建嵌套的li-ul-li元素