jquery实现简单的自动播放幻灯片效果_jquery
程序员文章站
2022-03-04 15:26:15
...
本文实例讲述了jquery实现简单的自动播放幻灯片效果。分享给大家供大家参考。具体实现方法如下:
html部分:
Pretty cool eh? This slide is proof the content can be anything.
CSS部分:
/* Slides need to be absolutely positioned within the wrapper. This has a tiny bit of extra pizazz: */ #slideshow { margin: 50px auto; position: relative; width: 240px; height: 240px; padding: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.4); } #slideshow > div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; }
jQuery部分:
//Run after DOM is ready. $("#slideshow > div:gt(0)").hide(); setInterval(function() { $('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); }, 3000);
希望本文所述对大家的jQuery程序设计有所帮助。
推荐阅读
-
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
-
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
-
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
-
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
-
jQuery简单实现遍历单选框的方法
-
jQuery实现的简单排序功能示例【冒泡排序】
-
jQuery实现下拉框左右选择的简单实例
-
一个CSS+jQuery实现的放大缩小动画效果
-
jquery实现弹出窗口效果的实例代码
-
用jQuery实现的智能隐藏、滑动效果的返回顶部代码