每 10 秒更换一次图像

Question

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

这是图片，我只想在 javascript 上添加一些代码而不更改下面的这些代码

HTML

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

Answer 1

这是我为类似场景所做的。

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

Answer 2

您可以为此使用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();
}

小提琴

每 10 秒更换一次图像

问题描述

2 个解决方案

解决方案1
1 2015-09-28 15:59:53

解决方案2
0 2015-09-28 14:32:00

每 10 秒更换一次图像

问题描述

2 个解决方案

解决方案1 1 2015-09-28 15:59:53

解决方案2 0 2015-09-28 14:32:00

解决方案1
1 2015-09-28 15:59:53

解决方案2
0 2015-09-28 14:32:00