Question

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

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

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

我还发现了this jQuery plugin，它看起来比我需要的要复杂得多，但却有我想要的过渡。

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

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插件，它也可以完成你所要求的一切，并且省略了一些你不需要的高级内容。这个精简插件的优点是，它比完整的插件要小得多。对最终用户更好。

Answer 2

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

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

真的很简单的jQuery滑动照片

2 个答案: