欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascript实现点击图片切换

程序员文章站 2023-12-29 17:58:34
击实现图片切换效果在生活中非常的常见,恰巧今天的练习也是做一个图片的切换效果。html代码如下:

击实现图片切换效果在生活中非常的常见,恰巧今天的练习也是做一个图片的切换效果。

html代码如下:

<div class="img">
 <img src="images/1.jpg" id="myimg" class="myimg" alt="这里是1.jpg">
 <p>
 <input type="button" id="pre" class="btn" value="上一张">
 <input type="button" id="next" class="btn" value="下一张">
 </p> 
</div>

css代码如下:

*{
 margin: 0;
 padding: 0;
}
img{
 boder:none;
}
button{
 outline: none;
 vertical-align: middle;
}
.img{
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 margin-top: 20px;
 text-align: center;
}
.myimg{
 width: 500px;
 height: 300px;
}
p{
 text-align: center;
}
p .btn{
 width: 100px;
 height: 30px;
 background: #306bbf;
 color: #fff;
 margin-top: 20px;
 margin-bottom: 20px;
}

javascript 部分:

//找标签
let myimg = document.getelementbyid("myimg");
let pre=document.getelementbyid("pre");
let next=document.getelementbyid("next");

//创建一个保存图片的数组
let arrimg = ["images/1.jpg", "images/1-1.png", "images/3.jpg" ];
//数组的索引下标
let index=0;
//定义事件函数
function preimg(event){
 index--;
 //实现循环切换
 if (index<0)
 {
  index=arrimg.length-1;
 }
 myimg.src = arrimg[index];
}
function nextimg(event){
 index++;
 //实现循环切换
 if (index>arrimg.length-1)
 {
 index=0;
 }
 myimg.src = arrimg[index];
}

pre.addeventlistener('click',preimg);
next.addeventlistener('click',nextimg);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关标签: js 图片切换

上一篇:

下一篇: