社区
JavaScript
帖子详情
用简单的js写图片切换
fangmengyan
2015-09-01 02:12:00
图片可以按向左向右键进行切换,我不太会js,希望简单一点
...全文
137
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编
写
图片
切换
代码,以及其中涉及的关键知识点。 首先,我们需要了解HTML结构,它是页面的基础,包含
图片
元素。例如,我们可以有多个
图片
元素,通过CSS隐藏除了第一个之外的...
一个纯手
写
的jquery+css3
图片
循环
切换
效果
总的来说,这个项目展示了如何结合使用jQuery和CSS3来创建一个交互式的
图片
切换
效果,通过
简单
的代码实现复杂的动态视觉体验。这在网页设计中是一种常见的实践,可以提升用户在浏览网页时的参与度和满意度。
js
写
的飘浮广告 带
图片
自动放映、
切换
本教程将深入讲解如何使用JavaScript实现一个带有
图片
自动
切换
功能的飘浮广告。 首先,我们需要创建HTML结构来承载广告。一个
简单
的飘浮广告可能包含一个容器div,以及在其中循环显示的一系列
图片
。例如: ```html...
javascript
写
的一个
简单
的
图片
交替显示
总的来说,javascript实现的
图片
交替显示是一个基础但实用的功能,通过
简单
的代码就能让网页变得更加生动活泼。无论是初学者还是经验丰富的开发者,理解并掌握这一技术都能为网页增添更多动态魅力。
JavaScript
87,985
社区成员
224,729
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章