JS点击更换图片

2021 年 08 月 06 日

1156 次浏览

2260字数

<h2>JS点击更换图片</h2><pre><code> &lt;!DOCTYPE html&gt;
 &lt;html lang=&quot;en&quot;&gt;
 &lt;head&gt;
 &lt;meta charset=&quot;UTF-8&quot;&gt;
 &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
 &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
 &lt;title&gt;Document&lt;/title&gt;
 &lt;script&gt;
 window.onload = function() {
 var bj = document.getElementById(&quot;bj&quot;) //要处理的图片
 var syg = document.getElementById(&quot;syg&quot;) //点击上一个
 var xyg = document.getElementById(&quot;xyg&quot;) //点击下一个
 sz = 1 //初始化图片为第一张
 xyg.onclick = function() { //下一张点击事件
 if (sz == 4) {
 sz = 1 //如果数字等于四则重置
 } else {
 sz++ //sz=sz+1
 }
 bj.src = +sz + &quot;.jpg&quot; //更换图片
 }
 var syg = document.getElementById(&quot;syg&quot;) //上一个
 syg.onclick = function() { //上一张点击事件
 if (sz == 1) {
 sz = 4 //如果数字等于四则初始化他 
 } else {
 sz-- //sz=sz+1
 }
 bj.src = +sz + &quot;.jpg&quot; //更换图片 //更换图片
 }
 }
 &lt;/script&gt;
 &lt;style&gt;
 img {
 width: 100px;
 height: 100px;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div&gt;
 &lt;p id=&quot;syg&quot;&gt;上一张&lt;/p&gt;
 &lt;p id=&quot;xyg&quot;&gt;下一张&lt;/p&gt;
 &lt;img src=&quot;1.jpg&quot; id=&quot;bj&quot; alt=&quot;背景图&quot;&gt;
 &lt;!--要更换的图片--&gt;
 &lt;/div&gt;
 &lt;/body&gt; 
 &lt;/html&gt;</code></pre><img src="https://www.xxhzm.cn/usr/uploads/2021/07/346094123.png" alt="tu.png" title="tu.png"style="">数组形式:<pre><code>function RotationChart() {
 var pic = ['1.jpg', '2.jpg', '3.jpg', '4.jpg']; //图片位置
 var num = 0;
 // console.log(pic.length)
 var img = document.querySelector('#img'); //查询图片
 var xyg = document.querySelector('#xyg'); //下一个
 var syg = document.querySelector('#syg'); //上一个
 //console.log(xyg)
 xyg.onclick = function() {
 num++;
 if (num == pic.length) {
 num = 0;
 }
 img.src = pic[num];
 }

syg.onclick = function() {
 num--;
 if (num &lt; 0) {
 num = pic.length - 1;
 }
 img.src = pic[num];
 }
 }
</code></pre>需要使用时直接调用函数RotationChart()即可本文作者：小小孩子们 转载请注明原文地址 本文地址<a href="https://www.xxhzm.cn/index.php/archives/3/"><a href="https://www.xxhzm.cn/index.php/archives/3/">https://www.xxhzm.cn/index.php/archives/3/</a></a>