用简单的js写图片切换

fangmengyan 2015-09-01 02:12:00

图片可以按向左向右键进行切换,我不太会js,希望简单一点
...全文
132 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
  • 打赏
  • 举报
回复
百度一下源码很多
Re: Mycat 实现 MySQL的分库分表、读分离、主从切换 =============================# MyCAT 作用是能够代替昂贵的oracle的MySQL集群中间件。     1) 一个彻底开源的,面向企业应用开发的“大数据库集群”    2) 支持事务、ACID、可以替代Mysql的加强版数据库    3) 一个可以视为“MySQL”集群的企业级数据库,用来替代昂贵的Oracle集群(核心价值观) (即:可不用 Orcale数据库及RAC等,以此代替)    4) 一个融合内存缓存技术、Nosql技术、HDFS大数据的新型SQL Server    5) 结合传统数据库和新型分布式数据仓库的新一代企业级数据库产品    6) 一个数据库中间件产品 # MyCAT 目标:    1) 低成本的将现有的单机数据库和应用,平滑迁移到“云”端,解决数据存储和业务规模迅速增长情况下的数据瓶颈问题。从这一点介绍上来看,能满足数据库数据大量存储,提高了查询性能。    2) MyCat在大数据方面的运用不容小觑啊。 # MyCAT 特性    1) 支持 SQL 92标准    2) 支持Mysql集群,可以作为Proxy使用    3) 支持JDBC连接ORACLE、DB2、SQL Server,将其模拟为MySQL Server使用    4) 支持galera for mysql集群,percona-cluster或者mariadb cluster, (提供高可用性数据分片集群)    5) 自动故障切换,高可用性(failover & HA)    6) 支持读分离,支持Mysql双主多从,以及一主多从的模式    7) 支持全局表,数据自动分片到多个节点,用于高效表关联查询    8) 支持独有的基于E/R 关系的分片策略,实现了高效的表关联查询    9) 多平台支持,部署和实施简单 # MyCAT 架构    用户可以把MyCAT看作是一个数据库代理,用mysql客户端工具(如Navicat)和命令访问,其核心功能就是分库分表,即将一个大表水平分割为N个小表,真正的存储在后端Mysql服务器中或其它数据库中。      

87,942

社区成员

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

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