用简单的js写图片切换

fangmengyan 2015-09-01 02:12:00

图片可以按向左向右键进行切换,我不太会js,希望简单一点
...全文
130 2 打赏 收藏 转发到动态 举报
写回复
用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
  • 打赏
  • 举报
回复
百度一下源码很多

87,838

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧