每10秒更换一次图像

Change image every 10 second

本文关键字：一次 图像 10秒      更新时间：2023-09-26

我想在javascript中每10秒更改图像，有人可以帮助我吗?

这里是图像，我只想在javascript上添加一些代码，而不改变

下面的这些代码

<body onload = "imageChanger()">
    <div>
        <ul>
            <li><img src = "images/img1.jpg"/></li>
            <li><img src = "images/img2.jpg"/></li>
            <li><img src = "images/img3.jpg"/></li>
            <li><img src = "images/img4.jpg"/></li>
        </ul>
    </div>
</body>
CSS

div {margin: 50px auto; height: 500px; width: 800px; overflow: hidden; border: 10px solid;}
img {width: 800px; height: 500px;}
ul {list-style-type: none; padding: 0; margin: 0;}

我想添加一些代码，将改变图像加载:

JS 

function imageChanger()
{
    //Code here
}

对于类似的场景，我是这样做的。

<body id="background">
<script>
$(function () { 
    var imageArray = ['BG-1.jpg', 'BG-2.jpg', 'BG-3.jpg', 'BG-4.jpg', 'BG-5.jpg', 'BG-6.jpg', 'BG-7.jpg', 'BG-8.jpg', 'BG-9.jpg', 'BG-10.jpg', 'BG-11.jpg', 'BG-12.jpg', 'BG-13.jpg', 'BG-14.jpg', 'BG-15.jpg', 'BG-16.jpg', 'BG-17.jpg', 'BG-18.jpg', 'BG-19.jpg', 'BG-20.jpg', 'BG-21.jpg', 'BG-22.jpg'] 
// on page load
$('#background').css({ 'background-image': 'url(/Content/img/BackGround/' + imageArray[Math.floor(Math.random() * imageArray.length)] + ')', 'background-size': 'cover' })
// every 10 seconds change to random image name in the array
setInterval(function () { 
    $('#background').css({ 'background-image': 'url(/Content/img/BackGround/' + imageArray[Math.floor(Math.random() * imageArray.length)] + ')', 'background-size': 'cover' }) 
    }, 10000); 
});
</script>
</body>

您可以使用setInterval()。

var i = 0;
setInterval(changeImage, 10000);
changeImage(); //Initial call to hide the images on start
function changeImage() {
    i = (i + 1) % $('li').length; //Make sure the list wraps back to 0
    $('li:eq(' + i + ')').show().siblings().hide();
}

小提琴

相关文章：