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();
}

Fiddle

每10秒更换一次图像

2 个答案: