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

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

Javascript: javascript 多图浏览超炫效果; 对采用动态原型方式无法展示继承机制得思考; JS 控制非法字符的输入代码; JSON 编辑器实现代码; jquery select操作的日期联动实现代码; select列表内容交换的js实现代码; javascript Demo模态窗口; JavaScript 加号(+)运算符号; javascript 动态生成私有变量访问器; javascript 模拟JQuery的Ready方法实现并出现的问题; jquery ready函数源代码研究; ASP Json Parser修正版; js select多选列表传值代码; JavaScript 对象模型执行模型; js 操作select相关方法函数; IE和firefox浏览器的event事件兼容性汇总; js event事件的传递与冒泡处理; 兼容IE,firefox的获取节点的文本值的javascript代码; IE7中javascript操作CheckBox的checked=true不打勾的解决方法; javascript Array.sort() 跨浏览器下需要考虑的问题

No. « ‹ 245 246 247 248 › »

技术文章搜索

关键字

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

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

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