这串代码是用做的焦点图，求大神解释，详细点，谢谢
<style>ul,li{margin:0;padding:0;list-style:none;}#jiaodian{width:308px;height:258px;o...
<style>
ul,li{ margin:0; padding:0; list-style:none;}
#jiaodian{ width:308px; height:258px; overflow:hidden; margin:200px auto;}
#jiaodian img{ border:#CCC solid 1px; padding:3px;}
#jiaodian ul{ overflow:hidden; position:relative;/*相对于前面的容器定位，它可以随窗口大小变化*/top:-25px; left:10px; z-index:1px;/*xyz立体轴*/padding-left:200px;}
#jiaodian li{float:left;}
#jiaodian ul a{display:block; text-align:center; width:20px; line-height:15px; border:#999 solid 1px; background-color:#Fcc;text-decoration:none;}
#jiaodian .first{ background-color:#F00;}
</style>
<script type="text/javascript">
function jiao(){
var jiaoid=document.getElementById("jiaodian");
var arry=jiaoid.getElementsByTagName("ul")[0].getElementsByTagName("a");/*相当于是数组*/
var imager=jiaoid.getElementsByTagName("img")[0];/*相当于定位*/
for(var i=0;i<arry.length;i++){
arry[i].onclick=function(){/*点击后执行*/
imager.src=this.href;
for(var j=0;j<arry.length;j++)
arry[j].className="";
this.className="first";
return false;
}
}
}
window.onload=function(){/*窗口打开后执行*/
jiao();
}
</script>
</head>
<body>
<div id="jiaodian">
<img src="img/Winter.jpg" width="300" height="250"/>
<ul>
<li class="first"><a href="img/Penguins.jpg">1</a></li>
<li><a href="img/Lighthouse.jpg">2</a></li>
<li><a href="img/Tulips.jpg">3</a></li>
<li><a href="img/Winter.jpg">4</a></li>
</ul>
</div>
</body>
</html> 展开
ul,li{ margin:0; padding:0; list-style:none;}
#jiaodian{ width:308px; height:258px; overflow:hidden; margin:200px auto;}
#jiaodian img{ border:#CCC solid 1px; padding:3px;}
#jiaodian ul{ overflow:hidden; position:relative;/*相对于前面的容器定位，它可以随窗口大小变化*/top:-25px; left:10px; z-index:1px;/*xyz立体轴*/padding-left:200px;}
#jiaodian li{float:left;}
#jiaodian ul a{display:block; text-align:center; width:20px; line-height:15px; border:#999 solid 1px; background-color:#Fcc;text-decoration:none;}
#jiaodian .first{ background-color:#F00;}
</style>
<script type="text/javascript">
function jiao(){
var jiaoid=document.getElementById("jiaodian");
var arry=jiaoid.getElementsByTagName("ul")[0].getElementsByTagName("a");/*相当于是数组*/
var imager=jiaoid.getElementsByTagName("img")[0];/*相当于定位*/
for(var i=0;i<arry.length;i++){
arry[i].onclick=function(){/*点击后执行*/
imager.src=this.href;
for(var j=0;j<arry.length;j++)
arry[j].className="";
this.className="first";
return false;
}
}
}
window.onload=function(){/*窗口打开后执行*/
jiao();
}
</script>
</head>
<body>
<div id="jiaodian">
<img src="img/Winter.jpg" width="300" height="250"/>
<ul>
<li class="first"><a href="img/Penguins.jpg">1</a></li>
<li><a href="img/Lighthouse.jpg">2</a></li>
<li><a href="img/Tulips.jpg">3</a></li>
<li><a href="img/Winter.jpg">4</a></li>
</ul>
</div>
</body>
</html> 展开
1个回答
展开全部
这是js做的焦点图，打开后加载jiao();函数，var jiaoid=document.getElementById("jiaodian");获得父级div ID，var arry=jiaoid.getElementsByTagName("ul")[0].getElementsByTagName("a");获得ul下A标签的集合
var imager=jiaoid.getElementsByTagName("img")[0];获取第一个图像，配合之前的css，显示在父级div id，后面的for循环就是焦点图的核心代码了，你有几个图像，只需要在 li下面添加就可以了，望采纳
var imager=jiaoid.getElementsByTagName("img")[0];获取第一个图像，配合之前的css，显示在父级div id，后面的for循环就是焦点图的核心代码了，你有几个图像，只需要在 li下面添加就可以了，望采纳
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
北京伟景智能科技
2024-11-23 广告
针对3D视觉无序抓取，北京伟景智能科技有限公司推荐采用基于深度学习和3D相机的解决方案，如AccuPick 3D等成熟方案。这些方案能够快速辨识不同工件在三维空间的位置与姿态，并精准引导机械手臂进行取放，有效提升生产效率。同时，这些方案还具...
点击进入详情页
本回答由北京伟景智能科技提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
