如何在JavaScript中创建轮播/滑块效果？

Question

我想做这样的事情：

我试图自己实现它，但结果只是丑陋。我看了jCarousel，但我不喜欢它。是否有其他技术或库可以让我产生这种效果，理想情况下是在Javascript和/或jQuery中？

Answer 1

使用JQuery流程插件并按照本教程进行操作：

http://net.tutsplus.com/articles/news/using-the-wonderful-jflow-plugin-screencast/

<script type="javascript" src="js/jFlow.js"></script>

<div id="wrap">  
<div id="controller">  
   <span class="jFlowControl">No 1 </span>  
   <span class="jFlowControl">No 2 </span>  
   <span class="jFlowControl">No 3 </span>  
</div>  

<div id="prevNext">  
    <img src="images/prev.png" alt="Previous" class="jFlowPrev">  
    <img src="images/next.png" alt="Next" class="jFlowNext">  
</div>  

<div id="slides">  
<div><img src="images/1.jpg">  
     Here is a featured image. Nice!  
 </div>  
 <div><img src="images/2.jpg">  

 Here is another neat featured image. Nice!  
 </div>  
 <div><img src="images/3.jpg">  

 Here is one last very cool featured image. Nice!  
 </div></div>  
</div>  

$(function() {  
  $("#controller").jFlow({  
    slides: "#slides",  
    width: "980px",  
    height: "313px",  
    duration: 600  
});  

}）;

Answer 2

看看这个：

http://www.instantshift.com/2012/03/26/80-useful-jquery-plugins-to-enrich-your-sites-user-experience/

80个JQuery插件，用于增强您的网站。 JCarousel可用于创建这样的滑块，但我更喜欢上面列表中的nr 3：Flexslider。它可以用作响应式滑块，以便能够针对多个平台（平板电脑/移动电话/灵活的HTML布局）调整其大小。