如何製作自動圖像滑塊。

Question

我有一個圖像滑塊。以下是滑塊的截圖。

這是工作的罰款。它在點擊一個或下一個箭頭.. 改變形象，但我想改變自動圖像也意味着一定的時間間隔的圖像應該自動改變。我用Google搜索很多，但我沒有得到如何做到這一點。請幫我從這個問題...提前

謝謝...

以下是代碼：

<div id="slideshow"> 
     <ul class="slides"> 
      <li class="sl"><img class="ss" src="image/a.png" width="191" height="278" alt="Splash Screen" /></li> 
      <li class="sl"><img class="ss" src="image/b.png" width="191" height="278" alt="Select Route" /></li> 
      <li class="sl"><img class="ss" src="image/c.png" width="191" height="278" alt="New Schedule" /></li> 
      <li class="sl"><img class="ss" src="image/d.png" width="191" height="278" alt="Created Routes" /></li> 
      <li class="sl"><img class="ss" src="image/e.png" width="191" height="278" alt="CR" /></li> 
     </ul> 
     <span class="arrow next"></span> 
     <span class="arrow previous"></span> 
    </div> 

以下是CSS：

#slideshow{ 
    background:url(res/iphone_small.png) no-repeat; 
    height:512px; 
    /*margin:auto 30px;*/ 
    margin:50px 25px auto; 
    position:relative; 
    width:257px; 
} 

#slideshow ul{ 
    height:300px; 
    left:33px; 
    list-style:none outside none; 
    overflow:hidden; 
    position:absolute; 
    top:78px; 
    width:257px; 
} 

#slideshow li{ 
    position:absolute; 
    display:none; 
    z-index:10; 
} 

#slideshow li:first-child{ 
    display:block; 
    z-index:1000; 
} 

#slideshow .slideActive{ 
    z-index:1000; 
} 

#slideshow canvas{ 
    display:none; 
    position:absolute; 
    z-index:100; 
} 

#slideshow .arrow{ 
    height:64px; 
    width:45px; 
    position:absolute; 
    background:url('res/arrows.png') no-repeat; 
    top:50%; 
    margin-top:-55px; 
    cursor:pointer; 
    z-index:5000; 
    margin-left:240px; 
    margin-right:240px; 
} 

#slideshow .previous{ background-position:right top;right:0;} 
#slideshow .previous:hover{ background-position:right bottom;} 

#slideshow .next{ background-position:left top;left:0;} 
#slideshow .next:hover{ background-position:left bottom;} 

下面是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); 
    } 

}); 

Answer 1

setInterval(function(){ 
     $('#slideshow .next').click(); 
    },1000); 

Answer 2

快速和骯髒的：

var $nextButton = $('#slideshow .next'); 
var interval = 2000; // we go to next pic every 2 seconds 

setInterval(function(){ 

    // we trigger nextImage event manually 
    $nextButton.click(); 

}, interval);