javascript焦点图（暂时不能自动切换）

时间：2014-05-08 16:06:15 阅读：386 评论：0 收藏：0 [点我收藏+]

<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="css.css"/>
<title></title>
<script>
window.onload=function() {
var img=document.getElementById("img").children;
var lis=document.getElementById(‘ul‘).getElementsByTagName("li"); //这里是获取需要执行动态效果的demo
var iNow;
function move(){ //这里是实现切换的函数
for(i=0;i<img.length;i++){ // 必须通过for循环来获取图片的index，这样才可以获取点击事件传来的index
img[i].style.display=‘none‘;
}

img[iNow].style.display=‘block‘;

}

for (i=0;i<lis.length;i++){ //这里必须通过for循环来获取点击li的时候的index，
lis[i].index=i;
lis[i].onclick=function (){
iNow=this.index; //点击的时候传递index
move(); //运行实现切换效果的函数
}
}
}
</script>
</head>
<body>
<div class="box">
<div id="img">
<img src="images/00031a.jpg" style="display: block;">
<img src="images/00032a.jpg" style="display: none;">
<img src="images/00033a.jpg" style="display: none">
</div>
<ul id="ul">
<li class="list1">1</li>
<li class="list2">2</li>
<li class="list3">3</li>
</ul>
</div>
</body>
</html> bubuko.com,布布扣

javascript焦点图（暂时不能自动切换）,布布扣,bubuko.com

标签：style blog class java ext color

原文地址：http://blog.csdn.net/xiaomogg/article/details/25303785

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行