社区
JavaScript
帖子详情
用简单的js写图片切换
fangmengyan
2015-09-01 02:12:00
图片可以按向左向右键进行切换,我不太会js,希望简单一点
...全文
133
2
打赏
收藏
用简单的js写图片切换
图片可以按向左向右键进行切换,我不太会js,希望简单一点
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
2 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
kittyno12
2015-09-01
打赏
举报
回复
这个例子是我自己写的,很简单,图片宽度和高度在css中修改、切换的速度在js中修改,图片链接在html中修改。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>ss</title> <style> /*图片点击切换css*/ #slideshowvertical { height: 326px; overflow: hidden; margin-bottom: 10px; } #previewPane { float: left; height: 326px; padding-top: 2px; width: 678px; } #mouseoverInfo { position: relative; width: 678px; height: 326px; margin-top: -326px; } .img_leftBtn { position: absolute; left: 10px; top: 45%; display: inline-block; width: 58px; height: 50px; background: url("http://vacation.homsom.com/Content/images/img_leftArrow.png") no-repeat 0 0; cursor: pointer; } .img_rightBtn { position: absolute; right: 10px; top: 45%; display: inline-block; width: 58px; height: 50px; background: url("http://vacation.homsom.com/Content/images/img_rightArrow.png") no-repeat 0 0; cursor: pointer; } </style> <script src="http://e.homsom.com/Scripts/jquery-1.9.1.js"></script> </head> <body> <div id="previewPane"> <img id=obj src="http://vacation.homsom.com/Content/images/default_678_407.gif" border=0 width="678" height="326" onerror="this.src='/Content/images/default_678_407.gif'" alt="" /> <div id="mouseoverInfo" style="display:none;"> <div class="img_leftBtn"></div> <div class="img_rightBtn"></div> <div class="imgIndex">0</div> </div> <div id="change_pic" style="display:none;"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/canting001.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/canting002.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/waiguan001.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/waiguan.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/haohuada.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/waiguan004.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/haohuashuang.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/waiguan003.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/datang.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/neijing.png" border="0" width="678" height="407" style="display:none"> </div> </div> <script> $(document).ready(function(e) { var a = ""; var curIndex = 0; //时间间隔 单位毫秒 var timeInterval=3000; var arr=new Array(); $("#change_pic").children("img").each(function () { var img_src = $(this).attr("src"); arr.push(img_src); }); $("#obj").attr("src", arr[0]); clearInterval(a); a = setInterval(changeImg, timeInterval); function changeImg() { var obj = document.getElementById("obj"); if (curIndex == arr.length - 1) { curIndex = 0; } else { curIndex += 1; } $(".imgIndex").html(curIndex); obj.src = arr[curIndex]; } //图片mouseover效果 $("#previewPane").mouseover(function () { $("#mouseoverInfo").show(); clearInterval(a); }); $("#previewPane").mouseout(function () { $("#mouseoverInfo").hide(); clearInterval(a); a = setInterval(changeImg, timeInterval); }); //左箭头 $(".img_leftBtn").click(function () { var obj = document.getElementById("obj"); if (curIndex == 0) { curIndex = arr.length - 1; } else { curIndex -= 1; } $(".imgIndex").html(curIndex); //$(".imgText").html(imageText[curIndex]); obj.src = arr[curIndex]; }); //右箭头 $(".img_rightBtn").click(function () { var obj = document.getElementById("obj"); if (curIndex == arr.length - 1) { curIndex = 0; } else { curIndex += 1; } $(".imgIndex").html(curIndex); //$(".imgText").html(imageText[curIndex]); obj.src = arr[curIndex]; }); }); </script> </body> </html>
DaveLeeCN
2015-09-01
打赏
举报
回复
百度一下源码很多
js
简单
地
切换
图片
简单
地
js
图片
切换
,不涉及读取文件,让人充分理解
js
的强大之处
javascript
写
的
图片
切换
代码
用JavaScript
写
的
图片
切换
代码,绝对实用!!
用CSS3滑动图像面板
图片
切换
特效多种css3
图片
切换
演示
用CSS3滑动图像面板
图片
切换
特效多种css3
图片
切换
演示
一个纯手
写
的jquery+css3
图片
循环
切换
效果
jquery+css3
图片
切换
效果,鼠标点击动画3图
切换
,自己纯手
写
。
简单
粗暴的
图片
切换
小果。几十行代码即可搞定。
js
写
的飘浮广告 带
图片
自动放映、
切换
js
做的飘浮广告,
图片
会自动
切换
,
图片
数量不限,可自行设置
JavaScript
87,955
社区成员
224,621
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章