点击右键头换到下一张图片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代码相关推荐

经典案例重点案例：点名表，JS正则验证全选、全不选、反选，点击可以实现三个功能，轮播图字符串截取以及替换，图片切换
重点案例: 点击开始点名,框内的名字转动点击结束点名,框内的转动停止,并出现一个随机的学生姓名 <!DOCTYPE html> <html> <head> ...
HTML下拉菜单去掉点,jQuery点击页面其他部分隐藏下拉菜单功能
一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面 ...
利用JS实现点击上一周或下一周却换
1.页面加载显示当前年份的第几周效果如图: html代码: <font size="2" color="black"> <inpu ...
移动硬盘打开后点击右键电脑就卡死，资源管理就崩溃
移动硬盘打开后点击右键电脑就卡死,资源管理就崩溃,然后就只能重启电脑了,移动硬盘了可以打开,就是不能在里面点击右键,一点就卡死. 下一个DiskGenius扫一下硬盘坏道并修复,是否还会出现上述问题 ...
jupyter写python的时候换行总是换到下一行的中间
在编写函数的时候,一按换行发现: 换到了下一行的中间,一开始不以为然,就每次重新定位,到后来太烦了,所以就好好看了这个问题,一开始以为jupyter被我玩坏了.后来发现不是. 原因: 红色箭头的地方缺 ...
[iOS] UITextField隐藏软键盘心得（隐藏自身软键盘、点击Return自动转到下个文本框、轻触背景隐藏软键盘）...
作者:zyl910 关于隐藏软键盘,网上的办法良莠不齐,大多是通过实现UITextFieldDelegate来隐藏软键盘,该方法代码较多,且在文本框很多的时不好处理.我经过搜索与摸索,找到了最佳的处理 ...
解决在工具栏Chrome图标上点击右键会显示“常去网站”和“最后关闭网站”的问题...
在工具栏Chrome图标上点击右键,可以"打开新窗口"或"打开新的隐身窗口"很方便,但是在其他电脑上尝试该操作时,发现有些情况下还会显示"常去网站&q ...
计算机右键菜单太多,电脑点击右键太多选项怎么办
1. 鼠标右键新建里有太多选项,怎么删除没用的选项清除方法: 1,以下代码粘贴进TXT文本文档: 2,文档另存后,命名为".cmd"后缀,保存到桌面: 3,双击该文档,即可自动清 ...
vb在 ListBox 之中点击右键弹出菜单
'1.API 的声明: Const LB_ITEMFROMPOINT = &H1A9 Private Declare Function SendMessage Lib "user32 ...
点击右键计算机属性弹出任务管理器,win10查看内存条型号的步骤
内存条是电脑重要的部件之一,内存越大运行速度就越快,有时候遇到电脑内存不够了还可以加内存条,那么在增加内存条之前,就要知道电脑内存型号,可是很多方法一: 使用第三方软件查看下载测试软件检测查看(CP ...

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

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

最新文章

热门文章