幻燈片自動播放圖片是目前網站比較流行的展示方式。在網路上我們能找到各種特效豐富的投影片外掛程式和程式碼。這裡專案需要,我自己做了一個簡單的,就不詳細講解了,程式碼很簡單。直接看效果圖和程式碼吧。 所有代碼ppt.html,需要提供相應圖片才能顯示: 複製代碼 代碼如下: PPT Demo <BR>.ppt-container, .ppt-container ul, .ppt-container li, .ppt-container img { <BR>margin : 0; <BR>padding : 0; <BR>border : 0; <BR>padding : 0; <BR>border : 0; <BR>} <BR>.ppt-container { <BR>width : 752px; /*根據展示圖片的大小在這裡設定容器的width和height*/ <BR>height : 328px; <BR>position : relative; <BR>} <BR> <BR>.ppt-container img { <BR>width : 100%; <BR>height : 100%; <BR>} <BR>.ppt-container .hide { <BR>display : none; 🎜>.ppt-container ul.image-list li { <BR>position : absolute; <BR>top : 0px; <BR>left : 0px; <BR>} <BR>.-container { <BR>list-style : none; <BR>position : absolute; <BR>right : 20px; <BR>bottom : 20px; <BR>} <BR>.ppt-container ul.button-list li < <BR>float : left; <BR>padding-right : 10px; <BR>} <BR>.ppt-container ul.button-list span { <BR>background : #E5E5E5; <🎜 🎜>line-height : 20px; <BR>font-size : 13px; <BR>display : block; <BR>cursor : default; <BR>} <BR>. { <BR>color : #FFF; <BR>background : #FF7000; <BR>} <BR> <BR>$(function() { <BR>var iCountOfImage = 3; // 共三張圖片<BR>var iPreIndex = 0; // 上一次索引位置<BR>$(".ppt-container ul.button-list li span").click( function() { <BR>var iIndex = $(this).attr("data-index"); <BR>if(iIndex == iPreIndex) { <BR>return; // 點擊了當前圖片,不切換<BR>} <BR><br>$(".ppt-container .image-list li[data-index=" iIndex "]").fadeIn(1500); <br>$(".ppt-container .image -list li[data-index=" iPreIndex "]").fadeOut(1500); <BR>iPreIndex = iIndex; <BR>$(".ppt-container .button-list span").removeClass("selected" ); <BR>$(this).addClass("selected"); <BR>}); <BR>setInterval(function() { // 自動播放,每5秒觸發一次點擊事件,來播放幻燈片<BR>var iNextIndex = (iPreIndex 1) % iCountOfImage; <BR>$(".ppt-container ul.button-list li span[data-index=" iNextIndex "]").click(); <BR>} <BR>} , 5000); <BR>}); <BR> 1 2 3