幻燈片自動播放圖片是當(dāng)前網(wǎng)站比較流行的一個展示方式。在網(wǎng)上我們能找到各種特效豐富的幻燈片插件和代碼。這里項(xiàng)目需要，我自己做了一個簡單的，就不詳細(xì)講解了，代碼很簡單。直接看效果圖和代碼吧。

?

所有代碼 ppt.html，需要提供相應(yīng)圖片才能顯示：

PPT Demo

.ppt-container, .ppt-container ul, .ppt-container li, .ppt-container img {

margin : 0;

padding : 0;

border : 0;

}

.ppt-container {

width : 752px; /*根據(jù)展示圖片的大小在這里設(shè)置容器的width和height*/

height : 328px;

position : relative;

}

.ppt-container img {

width : 100%;

height : 100%;

}

.ppt-container .hide {

display : none;

}

.ppt-container ul.image-list li {

position : absolute;

top : 0px;

left : 0px;

}

.ppt-container ul.button-list {

list-style : none;

position : absolute;

right : 20px;

bottom : 20px;

}

.ppt-container ul.button-list li {

float : left;

padding-right : 10px;

}

.ppt-container ul.button-list span {

background : #E5E5E5;

padding : 1px 7px;

line-height : 20px;

font-size : 13px;

display : block;

cursor : default;

}

.ppt-container ul.button-list span.selected {

color : #FFF;

background : #FF7000;

}

$(function() {

var iCountOfImage = 3; // 共三張圖片

var iPreIndex = 0; // 上一次索引位置

$(".ppt-container ul.button-list li span").click(function() {

var iIndex = $(this).attr("data-index");

if(iIndex == iPreIndex) {

return; // 點(diǎn)擊了當(dāng)前圖片，不切換

}

$(".ppt-container .image-list li[data-index="+ iIndex +"]").fadeIn(1500);

$(".ppt-container .image-list li[data-index="+ iPreIndex +"]").fadeOut(1500);

iPreIndex = iIndex;

$(".ppt-container .button-list span").removeClass("selected");

$(this).addClass("selected");

});

setInterval(function() { // 自動播放，每5秒觸發(fā)一次單擊事件，來播放幻燈片

var iNextIndex = (iPreIndex + 1) % iCountOfImage;

$(".ppt-container ul.button-list li span[data-index="+ iNextIndex +"]").click();

}, 5000);

});

• 1
• 2
• 3

總結(jié)

以上是生活随笔為你收集整理的java幻灯片播放代码_简单常用的幻灯片播放实现代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。