javascript实现点击图片切换

点击实现图片切换效果在生活中非常的常见，恰巧今天的练习也是做一个图片的切换效果。供大家参考：

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);

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

赞 (0)

相关推荐

  • 用html+css+js实现的一个简单的图片切换特效

    用html+css+js实现的一个简单的图片切换特效

    如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码 代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a

  • JS实现图片切换效果

    JS实现图片切换效果

    本文实例为大家分享了JS实现图片切换效果的具体代码,供大家参考,具体内容如下 <body> <button id="btn1">ON</button> <button id="btn2">OFF</button><br> <img src="images/0.jpg" alt="" id="pic"> <script

  • JavaScript实现图片切换效果

    JavaScript实现图片切换效果

    本文实例为大家分享了JavaScript实现图片切换效果,自定义属性的应用  供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片切换实例</title> <style> body{ background-color: #A9A9A9; margin:0px; } ul{ padding: 0; margi

  • 纯js实现背景图片切换效果代码

    html代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>背景切

  • javascript实现图片切换的幻灯片效果源代码

    网页上有许多图片切换的幻灯片效果,它们大多用flash实现,那javascript能不能实现他们呢,当然可以,我自己写了一个,和大家一同分享 废话少说,看代码 复制代码 代码如下: sx.activex.imagefade={ init:function(imga,fadeint,fadeoutt){ var ti=new Array(); for(var i=0;i<imga.length;i++){ ti[i]=new Image(); ti[i].src=imga[i] } var div

  • 纯js无flash仿搜狐女人频道FLASH图片切换效果代码

    纯js无flash仿搜狐女人频道FLASH图片切换效果代码

    前2个星期看到一位朋友说如何用JS实现http://women.sohu.com/这个页中FLASH图片切换效果,这两天有空,做了一个,大家评评: [加载图片慢点请等会] www.jb51.net 我们 JS图片切换 :: * { margin:0; padding:0; } body { margin:0; color:#88c; background:#333; } img { margin:0; padding:0; border:0; } #js_F { position:relativ

  • 简单的实现点击箭头图片切换的js代码

    简单的实现点击箭头图片切换的js代码

    步骤如下: (1) 准备图片(左右箭头,以及一些示例图片) (2) JS(jquery)的代码如下: 复制代码 代码如下: <script type="text/javascript" src="JS/jquery-1.4.4.js"></script> <script type="text/javascript"> var picPath = new Array(); picPath.push("I

  • js鼠标点击图片切换效果代码分享

    js鼠标点击图片切换效果代码分享

    本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图:                                      -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea

  • css图片切换效果代码[不用js]

    css图片切换效果代码[不用js]

    纯css图切换 练习 教程来自snwebsite a{ display:block; border:1px solid #cccccc; width:20px; height:20px; margin:1px; } dl{ position:absolute; width:240px; height:170px; } dt{ position:absolute; right:1px; top:25px; } dd{ width:240px; height:170px; overflow:hidd

  • 最简单的js图片切换效果实现代码

    无意中在网上发现的,代码非常的简单,一看就明白! 复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=5000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]

随机推荐