点击实现图片切换效果在生活中非常的常见,恰巧今天的练习也是做一个图片的切换效果。供大家参考:
HTML代码如下:
1
2
3
4
5
6
7
|
< 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代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
*{ 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 部分:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
//找标签 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); |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/Lzy_o/article/details/115408535