IT技术问答
联系我们
主页 > IT技术问答 > IT技术问答

简单的实现点击箭头图片切换的js代码

时间:2018-09-13  编辑:admin
步骤如下: (1) 准备图片(左右箭头,以及一些示例图片) (2) JS(jquery)的代码如下: 复制代码 代码如下: <script type="text/javascript" src="JS/jquery-1.4.4.js"></script> <script type="text/javascript"> var picPath = new Array(); picPath.push("Images/chuang_yhb.jpg"); picPath.push("Images/dong_wgx.jpg"); picPath.push("Images/gao_xsg.jpg"); var index = 0; $(function() { var top = $("#img1").offset().top; var left = $("#img1").offset().left; var height = $("#img1").height(); var width = $("#img1").width(); $("#img1").attr({ "src": picPath[index] }); $("#img1").parent().hover(function() { //show the arrow left and right $("#leftArrow").show(); $("#rightArrow").show(); $("#leftArrow").css({ "left": left - 10, "top": top + (height / 2) }); $("#rightArrow").css({ "left": left + width, "top": top + (height / 2) }); }, function() { //hide the arrrow left and right $("#leftArrow").hide(); $("#rightArrow").hide(); }); $("#leftArrow").click(function() { if (index > 0) { $("#img1").attr({ "src": picPath[--index] }); } }); $("#rightArrow").click(function() { if (index < picPath.length) { $("#img1").attr({ "src": picPath[++index] }); } }); }); </script> (3) Html部分如下: 复制代码 代码如下: <div> <img id="img1" /> <img id="leftArrow" src="Images/arrowa.jpg" /> <img id="rightArrow" src="Images/arrowb.jpg" /> </div> 下面再附一个js版的 无标题文档 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

本文源自: AG游戏网站_亚洲最佳百家乐游戏平台_AG环亚集团_网易体育

Copyright © 2005-2016 http://www.firebugkc.com AG游戏网站_亚洲最佳百家乐游戏平台_AG环亚集团_网易体育版权所有 AG游戏网站_亚洲最佳百家乐游戏平台_AG环亚集团_网易体育