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

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

Javascript: javascript select 改变字的颜色; JS 字符串连接[性能比较]; jquery控制div下所有连接; JavaScript Date对象使用总结; JS面向对象、prototype、call()、apply(); JavaScript 动态将数字金额转化为中文大写金额; JQuery textlimit 显示用户输入的字符数限制用户输入的字符数; DOM下的节点属性和操作小结; childNodes.length与children.length的区别; javascript Prototype 对象扩展; window.event.srcElement 得到事件源对象; JavaScript 下拉菜单实现代码; 用js获取元素属性的代码; jQuery live; css+js下拉菜单; javascript 贪吃蛇(详细注释版); Javascript 强制类型转换函数; js 进度条实现代码; JavaScript 验证浏览器是否支持javascript的方法小结; Js 控制表单域代码

No. « ‹ 136 137 138 139 › »

技术文章搜索

关键字

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

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

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