Question

我的页面上有图片标记。我需要该标签每1秒显示不同的图像。我的照片存储在“pict”文件夹中。如何使用JQuery实现这一目标？

Answer 1

$(function() {
    var images_array = [
        "/pict/image0.jpg",
        "/pict/image1.jpg",
        "/pict/image2.jpg",
        "/pict/image3.jpg",
        "/pict/image4.jpg"
    ];

    var i = 0;
    var len = images_array.length;
    var $img = $('#myImage');

    setInterval( function() {
        $img.attr('src', images_array[ i++ % len] );
    }, 1000);
});

或者如果你的图像编号是这样的，你实际上可以在没有数组的情况下进行编码：

$(function() {
    var i = 0;
    var len = 5; // Total number of images
    var $img = $('#myImage');

    setInterval( function() {
        $img.attr('src', "/pict/image" + (i++ % len) + ".jpg" );
    }, 1000);
});

编辑：请注意，要使用第二个示例，图片的索引号必须以0开头。如果他们以1开头，则您需要(i++ % len + 1)。

Answer 2

将所有图片来源存储在一个数组中，然后如果要选择一个随机图片来使用Math.random函数，最后使用jQuery.attr()切换图片的src属性。所有这些都应该在每秒触发一次的函数中。这是代码的草稿版本，假设您的图片存储在相对于您当前网址的images文件夹中：

function imageRotate() {
    var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
    var i = Math.floor(Math.random() * images.length);
    jQuery('#my-image').attr("src", "/images/" + images[i]);
    setTimeout('imageRotate()', 1000); // Re-launch after one second
}
setTimeout('imageRotate()', 1000); // First launch after 1 second interval

或者，您可以尝试jQuery Cycle plugin。

Answer 3

我使用的简单图像旋转器如下。您需要使用某种服务器端语言将所有图像渲染到文件夹中的div。

在此处查看：http://jsbin.com/iledo3

如果您有大量图片，我建议您先预先加载它们。

HTML：

<div id="slideshow-container">
    <div id="slideshow"> 
        <img src="img/home-1.jpg"> 
        <img src="img/home-2.jpg"> 
        <img src="img/home-3.jpg"> 
    </div> 
</div>

CSS：

#slideshow-container { height:410px; position:relative; }
#slideshow-container img { position:absolute; left:0; top:0; width:100%; height:100% }
#slideshow      { position:absolute; left:0; top:0; width:100%; height:100%; list-style:none }
#slideshow img  { width:904px; height:410px; background-repeat:none; background-position:top left; position:absolute; left:0; top:0 }
#slideshow      { position:absolute; left:0; top:0; width:100%; height:100%; }
#slideshow img  { width:904px; height:410px; background-repeat:none; background-position:top left; position:absolute; left:0; top:0 } /* adjust this for your images */

jQuery的：

    $('#slideshow img:gt(0)').hide(); //hide all images except first initially
    setInterval(function(){
      $('#slideshow :first-child').fadeOut('slow')
         .next('img').fadeIn('slow')
         .end().appendTo('#slideshow');}, 
      2000); //2 second interval

Answer 4

你可以抓住img元素并使用attr method来改变它的src，或使用不同的img元素replace。无论哪种方式，您可能都希望使用setInterval来处理时间。

Answer 5

jQuery Cycle插件可以帮助您吗？

使用JQuery更改图像

5 个答案: