制作连续幻灯片 - 使用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 

，然后添加适当的样式代码。 另外，根据需要编写悬停功能。