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

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

Javascript: JS幻想读取二进制文件; javascript 层展开/关闭，带缓冲效果; 仿淘宝首页分类列表效果实现代码; javascript 像素拼图实现代码; javascript+css 新闻显示tab 选项卡效果; [转]去百度面试的javascript 收获; 用JavaScript显示随机图像或引用; 一个类似vbscript的round函数的javascript函数; JavaScript 学习点滴记录; Js 获取HTML DOM节点元素的方法小结; 在线编辑器中换行与内容自动提取; 使用自定义setTimeout和setInterval使之可以传递参数和对象参数; javascript 绘制矩形框; 纯JS 绘制数学函数; javascript Excel操作知识点; jQuery 注意事项与原因分析; JQuery 初体验(建议学习jquery); RGB颜色值转HTML十六进制(HEX)代码的JS函数; JavaScript 使用技巧精萃(.net html; js tab 选项卡

No. « ‹ 133 134 135 136 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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