点击右键头换到下一张图片html,简单的实现点击箭头图片切换的js代码

步骤如下：

(1) 准备图片(左右箭头,以及一些示例图片)

(2) JS(jquery)的代码如下：

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] });

}

});

});

(3) Html部分如下：

下面再附一个js版的

无标题文档

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]