本文主要介绍利用JS实现简单的图片切换功能。本文中的示例代码非常详细,具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享使用JS实现简单图片切换的具体代码,供大家参考。具体内容如下
效果如图所示:
分析:先为按钮添加一个点击响应事件,然后构造函数。
其实切换图片就是切换img标签src的属性,可以获取然后修改。
您可以将属性值存储在数组中,并通过数组的索引来获取它们。
附上相关代码:
css代码的一部分:
style type='text/css '
*{
边距:0;
填充:0;
}
#a{
边距:50px自动;
宽度:500px
填充:15px
文本对齐:居中;
背景色:# 99FF99
}
/风格
Js代码:
脚本
window.onload=function(){
var Bt n1=document . getelementbyid(' Bt n1 ');
var Bt N2=document . getelementbyid(' Bt N2 ');
var img=document . getelementsbytagname(' img ')[0];
//构建一个数组来存储图片
var imgArr=['img/1.jpg ',' img/2.jpg ',' img/3.jpg ',' img/4.jpg ',' img/5.jpg']
var指数=0;
//console . log(src);
var p=document . getelementbyid(' b ');
btn1.onclick=function(){
//alert(' 1 ');
//img.src='img/2.jpg '
索引-;
if (index0){
index=imgArr.length-1
}
img.src=imgArr[index]
P.innerHTML=' of' imgArr.length '图片,当前'(索引1)'图片'
};
btn2.onclick=function(){
//alert(' 2 ');
指数;
if (index4){
索引=0;
}
img.src=imgArr[index]
P.innerHTML=' of' imgArr.length '图片,当前'(索引1)'图片'
};
};
/脚本
身体部位:
身体
div id='a '
Img src='img/1.jpg' alt='冰激凌'/
按钮id='btn1 '上一个/按钮
Button id='btn2' Next /button
P=' b '总共5张图片,当前1张/p
/div
/body
这就是本文的全部内容。希望对大家的学习有帮助,支持我们。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。