使用js实现简单的图片切换功能的方法,使用js实现简单的图片切换功能命令,使用JS实现简单的图片切换功能

使用js实现简单的图片切换功能的方法,使用js实现简单的图片切换功能命令,使用JS实现简单的图片切换功能

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

留言与评论(共有 条评论)
   
验证码: