失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 点击右键头换到下一张图片html 简单的实现点击箭头图片切换的js代码

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

时间:2020-04-25 01:18:26

相关推荐

点击右键头换到下一张图片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需再刷新一下页面才能执行]

如果觉得《点击右键头换到下一张图片html 简单的实现点击箭头图片切换的js代码》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。