Question

我有漂亮的html5和jquery幻灯片，并希望它是自动播放？我必须怎么做？我尝试了不同的方式，但没有改变，也尝试了setTimeout但也没有，请帮助我，谢谢所有

HTML代码

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slideshow</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

<div id="slideshow">

    <ul class="slides">
        <li><img src="img/photos/1.jpg" width="620" height="320" alt="Marsa Alam underawter close up" /></li>
        <li><img src="img/photos/2.jpg" width="620" height="320" alt="Turrimetta Beach - Dawn" /></li>
        <li><img src="img/photos/3.jpg" width="620" height="320" alt="Power Station" /></li>
        <li><img src="img/photos/4.jpg" width="620" height="320" alt="Colors of Nature" /></li>
    </ul>

    <span class="arrow previous"></span>
    <span class="arrow next"></span>
</div>




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

JS

$(window).load(function(){

// We are listening to the window.load event, so we can be sure
// that the images in the slideshow are loaded properly.


// Testing wether the current browser supports the canvas element:
var supportCanvas = 'getContext' in document.createElement('canvas');

// The canvas manipulations of the images are CPU intensive,
// this is why we are using setTimeout to make them asynchronous
// and improve the responsiveness of the page.

var slides = $('#slideshow li'),
    current = 0,
    slideshow = {width:0,height:0};

setTimeout(function(){

    window.console && window.console.time && console.time('Generated In');

    if(supportCanvas){
        $('#slideshow img').each(function(){

            if(!slideshow.width){
                // Taking the dimensions of the first image:
                slideshow.width = this.width;
                slideshow.height = this.height;
            }

            // Rendering the modified versions of the images:
            createCanvasOverlay(this);
        });
    }




    window.console && window.console.timeEnd && console.timeEnd('Generated In');

    $('#slideshow .arrow').click(function(){
        var li          = slides.eq(current),
            canvas      = li.find('canvas'),
            nextIndex   = 0;

        // Depending on whether this is the next or previous
        // arrow, calculate the index of the next slide accordingly.

        if($(this).hasClass('next')){
            nextIndex = current >= slides.length-1 ? 0 : current+1;
        }
        else {
            nextIndex = current <= 0 ? slides.length-1 : current-1;
        }

        var next = slides.eq(nextIndex);

        if(supportCanvas){

            // This browser supports canvas, fade it into view:

            canvas.fadeIn(function(){

                // Show the next slide below the current one:
                next.show();
                current = nextIndex;

                // Fade the current slide out of view:
                li.fadeOut(function(){
                    li.removeClass('slideActive');
                    canvas.hide();
                    next.addClass('slideActive');
                });
            });
        }
        else {

            // This browser does not support canvas.
            // Use the plain version of the slideshow.

            current=nextIndex;
            next.addClass('slideActive').show();
            li.removeClass('slideActive').hide();
        }
    });

},100);

// This function takes an image and renders
// a version of it similar to the Overlay blending
// mode in Photoshop.

function createCanvasOverlay(image){

    var canvas          = document.createElement('canvas'),
        canvasContext   = canvas.getContext("2d");

    // Make it the same size as the image
    canvas.width = slideshow.width;
    canvas.height = slideshow.height;

    // Drawing the default version of the image on the canvas:
    canvasContext.drawImage(image,0,0);


    // Taking the image data and storing it in the imageData array:
    var imageData   = canvasContext.getImageData(0,0,canvas.width,canvas.height),
        data        = imageData.data;

    // Loop through all the pixels in the imageData array, and modify
    // the red, green, and blue color values.

    for(var i = 0,z=data.length;i<z;i++){

        // The values for red, green and blue are consecutive elements
        // in the imageData array. We modify the three of them at once:

        data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
        data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
        data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));

        // After the RGB elements is the alpha value, but we leave it the same.
        ++i;
    }

    // Putting the modified imageData back to the canvas.
    canvasContext.putImageData(imageData,0,0);

    // Inserting the canvas in the DOM, before the image:
    image.parentNode.insertBefore(canvas,image);
}

}）;

让我的html5幻灯片显示自动播放

0 个答案: