js怎样获取点击的是第几个li

<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就对应显示上面图片,怎样获取鼠标点击的是第几个,
效果就像图片上面,不知道怎样做完效果,求解?????

第1个回答  2013-08-11
<!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

本回答被网友采纳
第2个回答  2015-10-29
给你一个例子:
<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");
}
第3个回答  推荐于2016-01-06
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();
});
});本回答被提问者采纳