bugfix> javascript > 投稿

基本的な1ページのhtmlWebサイトを作成し、スタイルを設定しました。小さな画像ギャラリー(6枚)があり、ページが更新されるたびにJSを使用してこれらの画像を異なる順序で表示したいと思います。ページが更新されない場合は、画像を更新するためにタイマーをオンにします。

Math.randomを使用する必要があることはわかっており、インターバルタイマー付きのonloadを使用して画像を変更できます。私はいくつかの調査を行いましたが、これを実装する方法がわかりません。誰かが私を正しい方向に向けることができますか?

画像ギャラリーのhtml部分は次のとおりです。

<section id="gallery">
    <img src="./images/1.jpg" alt="img0">
    <img src="./images/2.jpg" alt="img1">
    <img src="./images/3.jpg" alt="img2">
    <img src="./images/4.jpg" alt="img3">
    <img src="./images/5.jpg" alt="img4">
    <img src="./images/6.jpg" alt="img5">
</section>

回答 4 件
  • これが例です。

    const getRandomNumber = (function() {
        var nums = [1,2,3,4,5,6];
        var current = [];
        function rand(n) {
            return (Math.random() * n)|0;
        }
        return function() {
          if (!current.length) current = nums.slice();
          return current.splice(rand(current.length), 1);
        }
    }());
    const images = document.querySelectorAll('#gallery img');
    getRandomImages = () => {
      const imagesNums = [];
      for (let i = 1; i < 7; i++) {
        imagesNums.push(getRandomNumber());
      }
      images.forEach((img, index) => {
          img.src = `./images/${imagesNums[index]}.jpg`
      })
    }
    setInterval(() => {
       getRandomImages()
    }, 10000);
    
    
    <section id="gallery">
        <img src="./images/1.jpg" alt="img0">
        <img src="./images/2.jpg" alt="img1">
        <img src="./images/3.jpg" alt="img2">
        <img src="./images/4.jpg" alt="img3">
        <img src="./images/5.jpg" alt="img4">
        <img src="./images/6.jpg" alt="img5">
    </section>
    
    

  • すべての画像ソースを配列に保持します。

    const imgSources = ['./images/1.jpg', './images/2.jpg', './images/3.jpg'];
    
    

    リストからランダムなアイテムを選択します

    const randomItem = Math.floor(Math.random())
    
    

    次に、HTMLから画像を選択し、ソース属性を設定します

    const image = document.querySelector('img'); // Assuming you have only 1, replace with id
    image.setAttribute('src', randomItem);
    
    

    ランダム画像の部分を作成しました。これで、setIntervalと同様になります

    setInterval(() => {
       const randItem = Math.floor(Math.random() * arr.length);
       image.setAttribute('src', randItem); 
    }, 3000); // 3s
    
    

    それでおしまい! ランダムなnoの関数を作成してから、両方の場所で属性を設定して、繰り返しないようにすることをお勧めします。

  • <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>test</title>
            <link rel="stylesheet" type="text/css" href="styles.css">
        </head>
        <body>
            <img id="image" src="./images/1.jpg">
            <script type = "text/javascript">
                var image = document.getElementById("image");
                var currentPos = 0;
                var images = ["./images/2.jpg", "./images/3.jpg", 
                               "./images/4.jpg","./images/5.jpg,./images/6.jpg]
                function auto_pic() {
                    if (++currentPos >= images.length)
                        currentPos = 0;
                    image.src = images[currentPos];
                }
                setInterval(auto_pic, 4000);
            </script>
        </body>
    </html>`
    
    

  • 交換するだけ Onclick とのイベント Window Refresh Event

    HTML

    <div id="box">
    <img id="image" />
    </div>
    <br />
    <input type="button" value="Randomize!" onClick="randImg()" />
    
    

    Javascript

       var images = [
        "https://png.pngtree.com/thumb_back/fh260/background/20190222/ourmid/pngtree-blue-atmospheric-background-image_50584.jpg",
        "https://radioralitafm.com/wp-content/uploads/2018/01/Blue-Background-Images-HD-Wallpapers-Backgrounds-of-Your-....jpg",
        "https://sinargarudaprima.files.wordpress.com/2013/08/blue-abstract-vista-wallpaper00000.jpg",
        "https://i.pinimg.com/originals/09/43/75/094375b4af674b559ac8a00a8c8d6662.jpg"];
    function randImg() {
        var size = images.length
        var x = Math.floor(size * Math.random())
        document.getElementById('image').src = images[x];
    }
    randImg();
    
    

    こちらデモJSFIDDLE

あなたの答え