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

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

Javascript: js一组验证函数; JavaScript 字符串连接性能优化; JavaScript CSS 菜单功能代码; jQuery 各种浏览器下获得日期区别; 清除网页历史记录，屏蔽后退按钮!; 关于IE7 IE8弹出窗口顶上; javascript StringBuilder类实现; 通过event对象的fromElement属性解决热区设置主实体的一个bug; Javascript 布尔型分析; javascript 动态参数判空操作; js 解决“options为空或不是对象”; javascript 语法学习练习; javascript 硬盘序列号+其它硬件信息; window.location和document.location的区别分析; javascript XML数据显示为HTML一例; HTML与javascript常碰到的编码问题; javascript 时间对象的练习; JavaScript 事件参考手册; javascript prototype，executing，context，closure; javascript 网页跳转的方法

No. « ‹ 121 122 123 124 › »

技术文章搜索

关键字

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

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

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