原生js点击按钮切换图片

谁借莪１个温暖的怀抱￠ 2022-01-05 11:27 418阅读 0赞

**<!DOCTYPE html>**  
**<html lang="en">**  
**<head>**  
 **<meta charset="UTF-8">**  
 **<title>动态切换图片</title>**  
**</head>**  
**<style>**  
**ul\{**   
 **padding:0;margin:0;**  
**\}**  
**li\{**   
 **list-style: none;**  
**\}**

**\#pic\{**   
 **position: relative;**  
 **width: 400px;**  
 **height: 400px;**  
 **background-color:red;**  
 **margin:100px auto;**  
 **background:url('image/1.jpg') no-repeat center;**

**\}**  
**\#pic img\{**   
 **width: 400px;**  
 **height: 400px;**  
**\}**  
**\#pic ul\{**   
 **width: 50px;**  
 **position: absolute;**  
 **top: 0;**  
 **right: -70px;**

**\}**  
**li\{**   
 **width: 40px;**  
 **height: 40px;**  
 **margin-bottom:10px;**  
 **background-color: pink;**  
 **float: left;**  
**\}**  
**\#pic span\{**   
  
 **position: absolute;**  
 **bottom: 10px;**  
 **left: 0;**  
**\}**  
**\#pic p,\#pic span\{**   
 **width: 400px;**  
 **height: 20px;**  
**\}**  
**\#pic p\{**   
 **position: absolute;**  
 **top: 10px;**  
 **left: 0;**  
**\}**  
**.active\{**   
 **background-color: red;**  
**\}**

**</style>**

**<body>**  
**<div id="pic">**  
**<img src="" alt="">**  
**<p>qwrwe</p>**  
**<span>werwer</span>**  
**<ul>**  
**</ul>**  
**</div>**

**<script>**  
**window.οnlοad=function()\{**   
 **//存放旧li**  
 **var oldLi=null;**  
 **var num=0;**  
 **var oPic = document.getElementById('pic');**  
 **var oImg = oPic.getElementsByTagName('img')\[0\];**  
 **var oUL = oPic.getElementsByTagName('ul')\[0\];**  
 **var oSpan= oPic.getElementsByTagName('span')\[0\];**  
 **var oP = oPic.getElementsByTagName('p')\[0\];**  
 **var oLi= oUL.getElementsByTagName('li');**  
 **var arr=\['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg'\];**  
 **var aText = \['图片1','图片2','图片3','图片4'\];**

**for(var i=0;i<arr.length;i++)\{**   
 **//动态添加元素**  
 **oUL.innerHTML+='<li></li>';**  
 **\}**  
 **// 旧li就等于当前的**  
 **oldLi=oLi\[num\];**  
  
  
 **// 初始化**  
 **oImg.src=arr\[num\];**  
 **oP.innerHTML=num+1+'/'+arr.length;**  
 **oSpan.innerHTML=aText\[num\];**  
 **oLi\[num\].className='active';**

**for(var i=0;i<arr.length;i++)\{**   
 **// 给元素自定义属性**  
 **//**   
 **oLi\[i\].index=i;**  
 **oLi\[i\].οnclick=function()\{**   
 **// 当元素被点击时图片文字信息都一起变化**  
 **oImg.src=arr\[this.index\];**  
 **oP.innerHTML=1+this.index+'/'+arr.length;**  
 **oSpan.innerHTML=aText\[this.index\];**  
 **// 清空上一个 当前添加**  
 **oldLi.className='';**  
 **//将上一个给当前**  
 **oldLi=this;**  
 **this.className='active';**  
 **\}**  
 **\}**  
**\}**  
**</script>**  
**</body>**  
**</html>**

**实现效果**

**![1563595-20190417131445130-48745451.gif][]**

转载于:https://www.cnblogs.com/zhizi99/p/10722881.html

[1563595-20190417131445130-48745451.gif]: /images/20211229/4940cc56b5e7409b9ecb098c5a687426.png