本文主要详细介绍js实现简单的图片切换。本文中的示例代码非常详细,具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享JavaScript在图片间切换的具体代码,供大家参考。具体内容如下
代码的主要思路:
1.首先,绑定“下一个”和“上一个”按钮,点击响应事件;
2.获取img标签对象,用于修改src属性值,实现图片的切换;
3.切换图片本质上是修改img标签中src属性的值;
4.创建一个数组来保存图片。这样在画面切换的过程中操作起来会更加方便。只需操作数组的索引。如果要切换到下一个,只需设置imgar [0]-imgar [1]即可;
5.创建一个变量来保存当前显示图片的索引,这样更容易操作图片;
6.需要注意的是,如果当前显示的图片是最后一张,下一张会自动跳回第一张;同样,如果当前显示的图片是第一张,前一张会自动跳回最后一张;
7.要设置顶部文本,先获取对应的P label对象;
8.通过修改P标签中的文本,可以实现顶部文本的实时转换;
!文档类型html
html lang='en '
头
meta charset='UTF-8 '
图片切换练习/标题
style type='text/css '
* {
边距:0;
填充:0;
}
#外部{
宽度:500px
边距:50px自动;
填充:30px
背景色:海蓝宝石;
}
/风格
脚本类型='文本/javascript '
window.onload=function () {
/**
*点击按钮切换图片。
*/
//3.获取img标签
var img=document . getelementsbytagname(' img ')[0];
//5.创建一个数组来保存图片的路径。
var imgArr=['img/1.jpg ',' img/2.jpg ',' img/3.jpg ',' img/4.jpg ',' img/5 . jpg '];
//6.创建一个变量来保存当前显示图片的索引。
var指数=0;//默认显示第一个
//8.获取具有id信息的元素
var info=document . getelementbyid(' info ');
//9,设置提示文本
info . innerhtml=' total ' imgarr . length '图片,这是'(索引1)'图片;
//1.将click事件绑定到上一个按钮。
var prev=document . getelementbyid(' prev ');
prev.onclick=function () {
//7.当索引是第一个时,需要将索引设置为最后一个。因为采用了- index,所以索引设置为5。
if (index==0) {
指数=5;
}
指数=指数-1;
//4.切换图片本质上就是修改img中的src属性。
img . src=im garr[index];
//9,设置提示文本
info . innerhtml=' total ' imgarr . length '图片,这是'(索引1)'图片;
}
//2.将click事件绑定到next按钮。
var next=document . getelementbyid(' next ');
next.onclick=function () {
//7.当索引是最后一个时,需要将索引设置为第一个。由于采用了索引,所以索引设置为-1。
if (index==4) {
index=-1;
}
指数=指数1;
//4.切换图片本质上就是修改img中的src属性。
img . src=im garr[index];
//9,设置提示文本
info . innerhtml=' total ' imgarr . length '图片,这是'(索引1)'图片;
}
}
/脚本
/头
身体
div id=外部对齐='居中'
p id=信息/p
Img src='img/1.jpg' alt='棒冰'/br/
按钮id='上一个'上一个/按钮
按钮id='下一步'下一步/按钮
/div
/body
/html
完成后的效果:每点击一次下一张或上一张图片,图片就会切换,顶部的提示文字也会相应变化。
这就是本文的全部内容。希望对大家的学习有帮助,支持我们。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。