html 使用Backstretch随机化幻灯片

Posted 2021-05-10

<script type="text/javascript" src="~/Style/js/jquery.backstretch.min.js"></script>

    <script type='text/javascript'>

        //using Backstretch to show a slideshow of sorts where the slideshow actually acts like the background image is random on refresh.

        var images = [
            'http://dl.dropbox.com/u/515046/www/outside.jpg',
            'http://dl.dropbox.com/u/515046/www/garfield-interior.jpg',
            'http://dl.dropbox.com/u/515046/www/cheers.jpg'
        ];
        // The index variable will keep track of which image is currently showing
        var index = 0,oldIndex;

        $(document).ready(function() {
    
            // Call backstretch for the first time,
            // In this case, I"m settings speed of 500ms for a fadeIn effect between images.
            index = Math.floor((Math.random()*images.length));
            $.backstretch(images[index], {
                speed: 1000
            });

            // Set an interval that increments the index and sets the new image
            // Note: The fadeIn speed set above will be inherited
            //	
            
            setInterval(function() {
               oldIndex = index;
                while (oldIndex == index) {
                    index = Math.floor((Math.random()*images.length));
                }
                $.backstretch(images[index]);
            }, 99999);

            // A little script for preloading all of the images
            // It"s not necessary, but generally a good idea
            $(images).each(function() {
                $("<img/>")[0].src = this;
            });
    
        });

    </script>