js点小图显示大图的切换功能代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js点小图显示大图的切换功能代码

技术文章搜索

关键字

Javascript 中的 js点小图显示大图的切换功能代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 301 ::

收藏到网摘: n/a

各种效果的jquery ui(接口)介绍 js怎样实现下拉框改变，它旁边的图像也改变

有时候做一些图片类型的信息，需要这个功能，好多朋友也问我要过类似的代码

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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/tech/20091012/20091012092902_0f28b5d49b3020afeecd95b4009adf4c.jpg"; img[1] = "/upload/tech/20091012/20091012092904_f2217062e9a397a1dca429e7d70bc6ca.jpg"; img[2] = "/upload/tech/20091012/20091012092912_82aa4b0af34c2313a562076992e50aa3.jpg"; function $(obj){ return document.getElementById(obj); } function $img(url){ return "<img src='" + url + "' />"; } 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> <div id="bImg"></div> <ul id="imgList"></ul> </body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

各种效果的jquery ui(接口)介绍 js怎样实现下拉框改变，它旁边的图像也改变

Javascript 中的 js点小图显示大图的切换功能代码

评论 (0) All