ページrefresnにさまざまな画像を表示し、javascriptでタイマーを使用する

bugfix> javascript > 投稿 2020-11-23 16:26

基本的な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>

javascript

html

回答 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

bugfix

ページrefresnにさまざまな画像を表示し、javascriptでタイマーを使用する

javascript

html

関連記事