php餐厅幻灯效果,jquery实现简单的自动播放幻灯片效果

本文实例讲述了jquery实现简单的自动播放幻灯片效果。分享给大家供大家参考。具体实现方法如下：

html部分：

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程序设计有所帮助。