Javascript幻灯片与随机的第一张图片

Javascript slideshow with random first pic?

本文关键字：一张 幻灯片 随机 Javascript      更新时间：2023-09-26

我正在尝试设置这个幻灯片脚本，以便显示的第一张图片是随机的(我需要第一张图片是一个不同的/随机幻灯片每次我们去的网站)，其余的图片可以显示在正确的顺序，这很好。

我使用Jon Raasch的简单jquery幻灯片脚本，如下所示:

<script type="text/javascript">
function slideSwitch() {
    var $active = $('#slideshow DIV.active');
    if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow DIV:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
$(function() {
    setInterval( "slideSwitch()", 2500 );
});
</script>
<div id="slideshow">
<div class="active"><img src="images/slide1.jpg"></div>
<div><img src="images/slide2.jpg"></div>
<div><img src="images/slide3.jpg"></div>
<div><img src="images/slide4.jpg"></div>
<div><img src="images/slide5.jpg"></div>
</div>

和CSS:

#slideshow {
position:relative;
height:401px;
}
#slideshow div {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow div.active {
z-index:10;
opacity:1.0;
}
#slideshow div.last-active {
z-index:9;
}

我已经尝试了一些东西，但javascript真的不是我的茶("设计师思维"在这里)，我所尝试的是不工作。什么好主意吗?

非常感谢!

根据jfriend00的回答，您需要将脚本设置为:

 function slideSwitch() {
    var $active = $('#slideshow div.active');
    if ( $active.length == 0 ) {
    var slides = $('#slideshow div');
    $active = slides.eq(Math.floor(Math.random() * slides.length));
}
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow div:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
$(function() {
    slideSwitch();
    setInterval( function(){slideSwitch()}, 2500 );
});

有一些语法错误，我不得不改变如何调用setInterval

工作小提琴:http://jsfiddle.net/f2UPm/

从HTML中删除活动类，然后用下面的代码设置它，将这一行改为这一行，并调整CSS，以便在JS运行之前没有幻灯片可见:

if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

: 

if ( $active.length == 0 ) {
    var slides = $('#slideshow DIV');
    $active = slides.eq(Math.floor(Math.random() * slides.length));
}

工作演示:http://jsfiddle.net/jfriend00/mpYSL/

像这样:

$(function() {
    var slides, index, current, last, last_index;
    slides = $('#slideshow div');
    // initialize index randomly
    index = Math.floor(Math.rand() * slides.length);
    // do a % trick to get index - 1 looping
    last_index = (index + slides.length - 1) % slides.length;
    last = slices[last_index]; // initialize last
    function slideSwitch() {
        current = slides[index];
        index = (index + 1) % slides.length; // % to loop
        current.addClass("active");
        last.addClass("last-active");
        current.css({ "opacity": 0.0 })
            .animate({ "opacity": 1.0}, 1000, function() {
                current.removeClass("active");
                last.addClass("active");
                last.removeClass("last-active");
                last = current;
            });
    }
    setInterval(slideSwitch, 2500);
    slideShow(); // run once now, because interval doesn't run until 2500ms
});
相关文章：