<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- - 如果当前为最后一张,点击后切换为第一张。 - 以此类推。 实现以下效果: 通过按钮点击,修改图片 - 点击后,随机修改为某一张(重不重复都可以)。 --> <!-- <button id="btn">点击更换图片</button> <img id="im" src="1.jpg" alt=""> <script> var btn = document.getElementById('btn') ; var im = document.getElementById('im'); var arr = ['1.jpg','2.jpg','3.jpg','4.jpg'] btn.onclick = function(){ im.src = arr[Math.floor(Math.random()*arr.length)]; } </script> --> <!-- 实现以下效果:(选做题) 通过按钮点击,修改图片 - 点击后,随机修改为某一张(不能重复)。 - 等本所有图都显示完毕一次了,再开始新一轮的随机 --> <button id="btn">点击更换图片</button> <img id="im" src="1.jpg" alt=""> <script> var btn = document.getElementById('btn') ; var im = document.getElementById('im'); var arr = ['1.jpg','2.jpg','3.jpg','4.jpg']; var a = [arr[0]]; btn.onclick = function(){ var who; if (a.length === arr.length) { do { who = arr[Math.floor(Math.random()*arr.length)]; } while (a[a.length - 1] === who); a = [who]; im.src = who; console.log(a); } else{ do { who = arr[Math.floor(Math.random()*arr.length)]; var i = 0; for (var j = 0; j < a.length; j++) { if (a[j] !== who) { continue; }else { i++; break; }; }; } while (i !== 0); a[a.length] = who; im.src = who; console.log(a); }; } </script> <!-- 实现以下效果: 通过按钮点击,修改图片: - 默认为第一张图片,每次点击切换为下一张。 --> <!-- <button id="btn">点击切换图片</button> // <img id="im" src="1.jpg" alt=""> // <script> // var btn = document.getElementById('btn'); // var im = document.getElementById('im'); // var arr = ['1.jpg','2.jpg','3.jpg','4.jpg']; // var n= 0; // btn.onclick = function(){ // im.src = arr[n]; // n++; // console.log(n); // if(n === arr.length){ // n=0; // } // } // </script> --> </body> </html>
代码仅供参考,照片路径麻烦自己更改.
美女相册切换(顺序切换,随机重复切换,随机不重复切换)
猜你喜欢
转载自www.cnblogs.com/ykb868686/p/9558577.html
今日推荐
周排行