js怎样获取点击的是第几个li
<divid="t_c_ggao"><ul><li><imgsrc="images/list-1.jpg"width="480"height="200"/></li><l...
<div id="t_c_ggao">
<ul>
<li><img src="images/list-1.jpg" width="480" height="200"/></li>
<li><img src="images/list-1.jpg" width="480" height="200" /></li>
<li><img src="images/lp570.jpg" width="480" height="200"/></li>
<li><img src="images/qx570.jpg" width="480" height="200" /></li>
<li><img src="images/ys570.jpg" width="480" height="200"/></li>
<li><img src="images/zx570.jpg" width="480" height="200" /></li>
<li><img src="images/list-1.jpg" width="480" height="200" /></li>
></ul>
<ul id="list_number">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul>
</div>
做一个轮播器，点击第几个li就对应显示上面图片，怎样获取鼠标点击的是第几个，
效果就像图片上面，不知道怎样做完效果，求解？？？？？ 展开
<ul>
<li><img src="images/list-1.jpg" width="480" height="200"/></li>
<li><img src="images/list-1.jpg" width="480" height="200" /></li>
<li><img src="images/lp570.jpg" width="480" height="200"/></li>
<li><img src="images/qx570.jpg" width="480" height="200" /></li>
<li><img src="images/ys570.jpg" width="480" height="200"/></li>
<li><img src="images/zx570.jpg" width="480" height="200" /></li>
<li><img src="images/list-1.jpg" width="480" height="200" /></li>
></ul>
<ul id="list_number">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul>
</div>
做一个轮播器，点击第几个li就对应显示上面图片，怎样获取鼠标点击的是第几个，
效果就像图片上面，不知道怎样做完效果，求解？？？？？ 展开
3个回答
展开全部
<!DOCTYPE html>
<head>
<style type="text/css">
ul{
list-style:none; /* 去掉ul前面的符号 */
margin: 0px; /* 与外界元素的距离为0 */
padding: 0px; /* 与内部元素的距离为0 */
width: auto; /* 宽度根据元素内容调整 */
}
/* 所有class为menu的div中的ul中的li样式 */
ul li{float:left; /* 向左漂移，将竖排变为横排 */}
#ulImages li{display:none};
</style>
<script>
function show(id){
var images = document.getElementById("ulImages").getElementsByTagName("li");
for(var i=0;i<images.length;i++){
images[i].style.display = "none";
}
images[id].style.display = "block";
}
</script>
</head>
<body>
<div id="t_c_ggao">
<ul id="ulImages">
<li style="display:block"><img src="images/list-1.jpg" width="480" height="200"/>1</li>
<li><img src="images/list-1.jpg" width="480" height="200" />2</li>
<li><img src="images/lp570.jpg" width="480" height="200"/>3</li>
<li><img src="images/qx570.jpg" width="480" height="200" />4</li>
<li><img src="images/ys570.jpg" width="480" height="200"/>5</li>
<li><img src="images/zx570.jpg" width="480" height="200" />6</li>
<li><img src="images/list-1.jpg" width="480" height="200" />7</li>
</ul>
<ul id="list_number">
<li><a href="#" onclick="show(0)">1</a></li>
<li><a href="#" onclick="show(1)">2</a></li>
<li><a href="#" onclick="show(2)">3</a></li>
<li><a href="#" onclick="show(3)">4</a></li>
<li><a href="#" onclick="show(4)">5</a></li>
<li><a href="#" onclick="show(5)">6</a></li>
<li><a href="#" onclick="show(6)">7</a></li>
</ul>
</div>
</body>
嗯?貌似我回答晚了，仅供参考吧，欢迎交流学习qQgroup21/77/712
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给你一个例子：
<ul>
<li id="1" onclick="dianji(this)">aaaa</li>
<li id="2" onclick="dianji(this)">bbbb</li>
<li id="3" onclick="dianji(this)">cccc</li>
<li id="4" onclick="dianji(this)">dddd</li>
</ul>
//js部分
function dianji(obj){
var zhi=obj.id;
alert("第"+zhi+"个li");
}
<ul>
<li id="1" onclick="dianji(this)">aaaa</li>
<li id="2" onclick="dianji(this)">bbbb</li>
<li id="3" onclick="dianji(this)">cccc</li>
<li id="4" onclick="dianji(this)">dddd</li>
</ul>
//js部分
function dianji(obj){
var zhi=obj.id;
alert("第"+zhi+"个li");
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
js要写的代码比较多，用jquery吧
$('#list_number li').each(function(i){
$(this).click(function(){
$('#t_c_ggao').children('ul:first').children('li:eq('+i+')').show().siblings('li').hide();
});
});
$('#list_number li').each(function(i){
$(this).click(function(){
$('#t_c_ggao').children('ul:first').children('li:eq('+i+')').show().siblings('li').hide();
});
});
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
