当前位置：文江博客话题详情

非常简单的 jQuery 滑动照片

发布于 2024-12-06 05:11:35 字数 576 浏览 0 评论 0原文

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

我想要的只是看起来像普通的（没有文本，没有要切换的箭头），每 5 秒滑动一张新照片......足够简单。

我找到了这个示例代码...这正是我想要的，非常简单，只不过它使用交叉淡入淡出而不是水平滑动。

我还发现了这个 jQuery 插件，它看起来比我需要的复杂得多，但是有我想要的那种转变。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

瑕疵 2024-12-13 05:11:35

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 
}

script:

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

你可以使用更多选项或效果，但这些基础知识正是您所要求的。

编辑：
甚至还有这个 jquery.cycle 插件的精简版，它也能满足您的所有要求，并省略了一些您的示例不需要的更高级的内容。
这个精简版插件的优点是它比完整插件小得多。对最终用户来说更好。

jquery cycle is a very extensive plugin for jquery, you could use that one.
you can go as far as you want with it, but the basics support exactly what you need.

take a look at this example:

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 
}

script:

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

you can use a lot more options or effects, but these basics are what you ask for.

edit:
there is even a lite version of this jquery.cycle plugin, which also does everything you ask, and leaves out some of the more advanced stuff which you don't need for your example.
upside of this lite plugin, is that it's much smaller than the full plugin. better for the end user.

回复收藏 0 原文