真正简单的 jQuery 滑动照片答案

【问题标题】：Really Simple jQuery Sliding Photos真正简单的 jQuery 滑动照片
【发布时间】：2013-12-20 19:08:11
【问题描述】：

所以我正在寻找一个基本的 jQuery 照片卷轴类型的东西放在我网站的主页上，我找到了this 页面。

我想要的只是看起来像一个普通的<img>（没有文字，没有可切换的箭头），它每 5 秒滑动一张新照片......很简单。

我找到了this sample code... 这正是我想要的，非常简单，除了它使用交叉淡入淡出而不是水平幻灯片。

我还找到了this jQuery plugin，它看起来比我需要的复杂得多，但具有我想要的那种过渡。

将两者结合起来最简单的方法是什么，所以我有一个非常简单的自动图像幻灯片（没有文本或箭头），但它使用了“简单幻灯片”插件中的漂亮过渡？

【问题讨论】：

标签： jquery html css animation slide

【解决方案1】：

jquery cycle 是一个非常广泛的 jquery 插件，你可以使用它。您可以随心所欲地使用它，但基础知识完全支持您的需求。

看看这个例子：

html:

<div class="pics"> 
    <img src="images/beach1.jpg" width="200" height="200" /> 
    <img src="images/beach2.jpg" width="200" height="200" /> 
    <img src="images/beach3.jpg" width="200" height="200" /> 
</div>

css:

.pics {  
    height:  232px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
} 

.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0 
}

脚本：

$('.pics').cycle({ 
    fx: 'scrollHorz',
    timeout: 5000,
    speed: 500
});

您可以使用更多options 或effects，但这些基础是您所要求的。

编辑：这个 jquery.cycle 插件甚至还有a lite version，它也可以完成您所要求的一切，并省略了一些您的示例不需要的更高级的东西。这个 lite 插件的好处是它比完整插件小得多。对最终用户更好。

【讨论】：

【解决方案2】：

Nivo slider 是很好的选择。仅 15kb 打包，您可以根据需要进行配置。

Once you nivo slide you can't go back...

【讨论】：