美女相册切换(顺序切换,随机重复切换,随机不重复切换)

<!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>


代码仅供参考,照片路径麻烦自己更改.
美女相册切换(顺序切换,随机重复切换,随机不重复切换)

猜你喜欢
