真正简单的jQuery滑动照片

所以我在寻找一个基本的jQuery的照片卷轴式的东西把我的网站的首页，我发现this页。真正简单的jQuery滑动照片

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

我发现this sample code ...这就是我想要的东西，很简单，但它采用了淡入淡出的，而不是一个水平滑动。

我还发现this jQuery plugin，它看起来要复杂得多，我需要，但我想要的那种转变。

什么是两者结合的最简单的方法，所以我有一个非常简单的自动图像幻灯片（无文本或箭头），但它使用的“易滑”插件很好的过渡？

来源

2011-09-22 Alex Coplan

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插件，它也做你问的一切，并留下了一些更先进的东西，你不需要为你的榜样的。这个精简版插件的优势在于它比完整插件小得多。对最终用户更好。

来源

2011-09-22 10:14:50 Sander

Nivo slider是伟大的选择。只有15kb打包，你可以根据需要进行配置。

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

来源

2011-09-22 10:15:02

真正简单的jQuery滑动照片

回答

相关问题