javascript焦点图（临时不能自动切换）
日期：2014-05-16 浏览次数：20388 次
javascript焦点图（暂时不能自动切换）
<!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>
&n
<!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>
&n
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
