製作連續幻燈片 - 使用jQuery？

Question

我需要製作一個連續的幻燈片放映，在頁面加載時啓動。

當用戶將鼠標懸停在上面時，幻燈片暫停並且標題向上滑動。當用戶將光標放在其他地方時，標題滑下，幻燈片繼續顯示。當用戶點擊幻燈片中的圖像時，他/她將被定向到適當的HTML。我可以使用任何類型的代碼。我不是一個有經驗的程序員，所以你必須真的詳細說明它。我沒有任何jQuery知識，但這次我可以使用它。這可能以前曾被問過，但我找不到它。對不起，我英文很差。

編輯：像http://www.cartoonnetwork.co.uk/（自動啓動，停止mousedown等）在頂部，但我希望它會繼續當鼠標移動關閉。我以前從來沒有用閃光燈編程，所以也許它可以是閃光以外的其他任何東西。

我可以使用這些語言：

• HTML（5）
• CSS
• 的JavaScript
• jQuery的

我會嘗試用類似閃光燈的語言做但它會更好，因爲我已經使用它們（不包括jQuery）。

編輯2：我喜歡Orbit（謝謝你，邁克爾！）和所有具有定時器

NB滑塊：我沒錢花過這麼記住這一點。

謝謝！

Answer 1

很多方法可以做到這一點，包括詳細的教程：

http://naldzgraphics.net/tutorials/25-must-learn-slider-tutorials-with-jquery/

http://www.tripwiremagazine.com/2011/10/jquery-image-slider-plugins.html

http://www.designyourway.net/blog/resources/28-useful-jquery-sliders-you-need-to-download/

http://webdesignfan.com/jquery-slider-tutorials-and-plugins/

http://vandelaydesign.com/blog/web-development/jquery-image-galleries/

http://machoarts.com/21-beautiful-jquery-sliders-for-your-next-project

http://designmodo.com/jquery-image-sliders/

Answer 2

，你會發現很多jQuery插件，你想要的東西里面做的。 Here

Answer 3

您可以將一個HTML這樣的：

<div class="main_view"> 
         <div class="window"> 
          <div class="image_reel"> 
           <a href="#"> 
            <img width="948" src="Images/Home/LIV.jpg" alt=""></a> <a href="#"> 
             <img width="948" src="Images/Home/JUM.jpg" alt=""></a> <a href="#"> 
              <img width="948" src="Images/Home/LOV.jpg" alt=""></a> <a href="#"> 
               <img width="948" src="Images/Home/BLI.jpg" alt=""></a> 
          </div> 
          <div class="pictureslide"> 
           <h2> 
            Livestrong</h2> 
           <p> 
            Mobile donations to fight cancer and improve lives.</p> 
           <a href="http://thirteen23.com/work/#livestrong-donation">See more</a> 
          </div> 
          <div class="pictureslide"> 
           <h2> 
            Jumpshot</h2> 
           <p> 
            The lighter side of serious software.</p> 
           <a href="/#jumpshot">See more</a> 
          </div> 
          <div class="pictureslide"> 
           <h2> 
            Flashback</h2> 
           <p> 
            An exciting way to explore, stylize, and share your Facebook photos.</p> 
           <a href="/#flashback">See more</a> 
          </div> 
          <div class="pictureslide"> 
           <h2> 
            Love Universe</h2> 
           <p> 
            Blurring the line between product and lifestyle.</p> 
           <a href="/#love-universe">See more</a> 
          </div> 
         </div> 
         <div class="paging"> 
          <a href="#" rel="1"> 
           <img src="Images/Home/LIV_sm.jpg" alt=""></a> <a href="#" rel="2"> 
            <img src="Images/Home/JUM_sm.jpg" alt=""></a> <a href="#" rel="3"> 
             <img src="Images/Home/LOV_sm.jpg" alt=""></a> <a href="#" rel="4"> 
              <img src="Images/Home/BLI_sm.jpg" alt=""></a> 
         </div> 
        </div> 

那麼你的JS：

var MainPageSlider = function (windowObj,element) { 
    var parent = $("#"+element);//element is the ID of the Master/Parent of this HTMLCode 
    parent.data('imagewidth', windowObj.imageWidth); 
    parent.data('imageSum', windowObj.imagesum + 1); 
    $(".paging a:first", parent).addClass("active"); 
    var intervalCulture; 
    var imageReelWidth = parent.data('imagewidth') * parent.data('imageSum'); 

    $(".image_reel", parent).css({ 'width': imageReelWidth }); 

    rotate = function() { 
     var triggerID = $active.attr("rel") - 1; 
     var image_reelPosition = triggerID * (parent.data('imagewidth') + 30); 
     $(".paging a", parent).removeClass('active'); 
     $active.addClass('active'); 

     $(".image_reel", parent).animate({ 
      left: -image_reelPosition 
     }, 500); 
    }; 

    rotateSwitch = function() { 
     play = setInterval(function() { 
      $active = $('.paging a.active', parent).next(); 
      if ($active.length === 0) { 
       $active = $('.paging a:first', parent); 
      } 
      rotate(); 
     }, 7000); 
    }; 
    rotateSwitch(); 
    $(".image_reel a", parent).hover(function() { 
     clearInterval(play); 
    }, function() { 
     rotateSwitch(); 
    }); 

    $(".paging a", parent).click(function() { 
     $active = $(this); 
     clearInterval(play); 
     rotate(); 
     rotateSwitch(); 
     return false; 
    }); 
}; 
MainPageSlider(windowObj,'element');//element is the Parent of this HTML 

，然後添加適當的樣式代碼。 另外，根據需要編寫懸停功能。