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

154 阅读 0 评论 102 点赞

我是靠谱客的博主美满大树，最近开发中收集的这篇文章主要介绍简单的实现点击箭头图片切换的js代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

步骤如下：

(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" alt="Show Pictures" style="margin-left:100px;" /> 
<img id="leftArrow" alt="Left Arrow" src="Images/arrowa.jpg" style="position:absolute;display:none;width:50px;height:35px;z-index:99" /> 
<img id="rightArrow" alt="Right Arrow" src="Images/arrowb.jpg" style="position:absolute;display:none;width:50px;height:35px;z-index:99" /> 
</div> 

下面再附一个js版的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<style type="text/css"> 
 
</style></head> 
<body> 
<div id="imgslide"><span id="pre" ></span> <span id="next" ></span><img id="showimg" src="//images.kaopuke.com/file_images/201804/688412_550x550_0.jpg" /> 
<div id="intro"> </div> 
</div> 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]