本文主要介绍利用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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。