Question

我已使用下面的Javascript代码在主页上设置了旋转图库。画廊效果很好，除了我想在刷新时有不同的图像显示。为了实现这一目标，我需要在代码中进行哪些更改？谢谢！

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

    <script>
    $.fn.preload = function() {
    this.each(function(){
    $('<img/>')[0].src = this;
    });
    }

    var images = Array(
    "1.jpg",
    "2.jpg",
    "3.jpg",
    "4.jpg",
    "5.jpg",
    "6.jpg",  
    "7.jpg",
    "8.jpg"  
     );

    $([images[0],images[1],images[2],images[3],images[4]]).preload();

    // Usage:

    var currimg = 0;

    $(document).ready(function(){
    function loadimg(){
    $('#outerWrapper').animate({ opacity: 1 }, 400,function(){

    //finished animating, minifade out and fade new back in
    $('#outerWrapper').animate({ opacity: 0.7 }, 100,function(){
     currimg++;
    if(currimg > images.length-1){
      currimg=0;
    }
    var newimage = images[currimg];
    //swap out bg src
    $('#outerWrapper').css("background-image", "url("+newimage+")");

    //animate fully back in
    $('#outerWrapper').animate({ opacity: 1 }, 600,function(){

    //set timer for next
    setTimeout(loadimg,5000);

    });
    });
    });
    }
    setTimeout(loadimg,5000);
    });
         </script>

Answer 1

您可以将currimg设置为0到n之间的随机值，其中n是图库中图像的总数。刷新后，当前显示的图像将倾向于与刷新前显示的图像不同。

currimg = Math.floor(Math.random()*8);

Javascript - 旋转图库刷新的新图像

1 个答案: