jquery - 真正简单的 jQuery 滑动照片

Question

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

我想要的只是看起来像普通的 <img> (没有文本，没有可切换的箭头)，每 5 秒滑过一张新照片……非常简单。

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

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

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

Answer 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 ，但这些基础知识正是您所要求的。

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