刷新页面时，图像将会改变

发布于 2025-02-10 15:38:54 字数 753 浏览 2 评论 0原文

页面刷新时，图像会更改，我正在完成此操作，但我无法添加单个图像链接。我该怎么做？请让我出去..这是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #banner-images img{
            width: 172px;
            height: 215px ;
            border: 10px solid #fff ;
        }
    </style>
</head>
<body>
     <div id="banner-images"> </div>
<script> 
var images = ['1.jpg ', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'];
 
$('<img class="fade-in" src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner-images');
</script>
</body>
</html>

原文

Image changes when the page refreshes and I am accomplishing this but I can't add individual image links. how can I do it? Please have me out.. here is the code

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #banner-images img{
            width: 172px;
            height: 215px ;
            border: 10px solid #fff ;
        }
    </style>
</head>
<body>
     <div id="banner-images"> </div>
<script> 
var images = ['1.jpg ', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'];
 
$('<img class="fade-in" src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner-images');
</script>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不醒的梦 2025-02-17 15:38:55

我希望我能正确理解您的问题。这是一个解决方案。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #banner-images img{
            width: 172px;
            height: 215px ;
            border: 10px solid #fff ;
        }
    </style>
</head>
<body>
    <div id="banner-images"> </div>
    <script> 
        var images = [
            {src: '1.jpg', href: '#link1'},
            {src: '2.jpg', href: '#link2'},
            {src: '3.jpg', href: '#link3'},
            {src: '4.jpg', href: '#link4'}
        ];
        var random_image = images[Math.floor(Math.random() * images.length)];
        $('<a href="' + random_image.href + '"><img class="fade-in" src="images/' + random_image.src + '"></a>').appendTo('#banner-images');
    </script>
</body>
</html>

如果您想更清楚，可以使用 JavaScript模板文字这样做。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #banner-images img{
            width: 172px;
            height: 215px ;
            border: 10px solid #fff ;
        }
    </style>
</head>
<body>
    <div id="banner-images"></div>
    <script> 
        var images = [
            {src: '1.jpg', href: '#link1'},
            {src: '2.jpg', href: '#link2'},
            {src: '3.jpg', href: '#link3'},
            {src: '4.jpg', href: '#link4'}
        ];

        var random_image = images[Math.floor(Math.random() * images.length)];

        $('#banner-images').html(`
            <a href="${random_image.href}">
                <img class="fade-in" src="images/${random_image.src}">
            </a>
        `);
    </script>
</body>
</html>

I hope i understood your question correctly. Here is a solution.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #banner-images img{
            width: 172px;
            height: 215px ;
            border: 10px solid #fff ;
        }
    </style>
</head>
<body>
    <div id="banner-images"> </div>
    <script> 
        var images = [
            {src: '1.jpg', href: '#link1'},
            {src: '2.jpg', href: '#link2'},
            {src: '3.jpg', href: '#link3'},
            {src: '4.jpg', href: '#link4'}
        ];
        var random_image = images[Math.floor(Math.random() * images.length)];
        $('<a href="' + random_image.href + '"><img class="fade-in" src="images/' + random_image.src + '"></a>').appendTo('#banner-images');
    </script>
</body>
</html>

If you want to make it clearer, you can do it this way with JavaScript Template Literals.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #banner-images img{
            width: 172px;
            height: 215px ;
            border: 10px solid #fff ;
        }
    </style>
</head>
<body>
    <div id="banner-images"></div>
    <script> 
        var images = [
            {src: '1.jpg', href: '#link1'},
            {src: '2.jpg', href: '#link2'},
            {src: '3.jpg', href: '#link3'},
            {src: '4.jpg', href: '#link4'}
        ];

        var random_image = images[Math.floor(Math.random() * images.length)];

        $('#banner-images').html(`
            <a href="${random_image.href}">
                <img class="fade-in" src="images/${random_image.src}">
            </a>
        `);
    </script>
</body>
</html>

回复收藏 0 原文

~没有更多了~