js点小图显示大图的切换功能代码_图象特效

来源：懂视网责编：小采时间：2020-11-27 20:40:02

js点小图显示大图的切换功能代码_图象特效

js点小图显示大图的切换功能代码_图象特效: javascript点小图出大图练习 by 阿会楠 body{ text-align:center; margin:0 auto; } #imgList li img{ width:80px; height:80px; border:1px solid #cccccc; } ul li{ list-style:none; float

推荐度：

点击下载本文 文档为doc格式

导读js点小图显示大图的切换功能代码_图象特效: javascript点小图出大图练习 by 阿会楠 body{ text-align:center; margin:0 auto; } #imgList li img{ width:80px; height:80px; border:1px solid #cccccc; } ul li{ list-style:none; float

<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> 
 <title>javascript点小图出大图 练习 by 阿会楠</title> 
 <style type="text/css"> 
 body{ 
 text-align:center; 
 margin:0 auto; 
 } 
 #imgList li img{ 
 width:80px; 
 height:80px; 
 border:1px solid #cccccc; 
 } 
 ul li{ 
 list-style:none; 
 float:left; 
 margin-left:20px; 
 cursor:pointer; 
 } 
 .rborder{ 
 border:1px solid yellow; 
 } 
 </style> 
 <script language="JavaScript" type="text/javascript"> 
 var img = new Array(); 
 img[0] = "/upload/20080918164412320.jpg"; 
 img[1] = "/upload/20080918164413758.jpg"; 
 img[2] = "/upload/20080918164414965.jpg"; 
 function $(obj){ 
 return document.getElementById(obj); 
 } 
 function $img(url){ 
 return "<img src='" + url + "' onclick='changeborder(this)' />"; 
 } 
 function changeborder(obj){ 
 for(var j = 0;j < img.length;j++){ 
 $("imgList").getElementsByTagName("li")[j].getElementsByTagName("img")[0].style.borderColor = "#cccccc"; 
 } 
 obj.style.borderColor= "red"; 
 $("bImg").innerHTML = $img(obj.src); 
 } 
 window.onload = function(){ 
 for(var i = 0;i < img.length;i++){ 
 $("imgList").innerHTML += "<li>" + $img(img[i]) + "</li>"; 
 } 
 if($("bImg").innerHTML == ""){ 
 $("bImg").innerHTML = $img(img[0]); 
 $("imgList").getElementsByTagName("li")[0].getElementsByTagName("img")[0].style.borderColor = "red"; 
 } 
 
 } 
 
 </ script> 
 </head> 
 <body> 
 
 
 </body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

js点小图显示大图的切换功能代码_图象特效

推荐度：

点击下载本文 文档为doc格式

标签：图片切换 js

热门焦点

js点小图显示大图的切换功能代码_图象特效

js点小图显示大图的切换功能代码_图象特效

js点小图显示大图的切换功能代码_图象特效

最新推荐

猜你喜欢

热门推荐