Javascript - 刷新旋转画廊的新图像答案

【问题标题】：Javascript - New image on refresh for rotating galleryJavascript - 刷新旋转画廊的新图像
【发布时间】：2023-03-18 06:59:01
【问题描述】：

我使用下面的 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>

【问题讨论】：

你能加个小提琴吗...
当您说“刷新”时，您可能会打开一罐蠕虫病毒。您打算存储重新加载之前显示的最后一张图片吗？这听起来很恐怖。但如果必须，我推荐this post。

标签： javascript image refresh gallery

【解决方案1】：

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

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

【讨论】：