對jquery沒有深入研究過，只是怎麽簡單怎麽來，符合自己的需求即可。以下是代碼。

　　使用的是ThinkPHP框架，圖片等是循環出來的，下面是模板中的代碼：

<div id="rotation">
　　<volist name="banner" id="vo">
   　　<div mid="{$i}">
      　　<a href=""><img alt="" src="__PUBLIC__/images/post{$i}.jpg"></a>
         <span>{$vo.title}</
 
span>
      </div>
　　</volist>
　　<ul id="banner-button">
   　　<volist name="banner" id="vo">
      　　<li mid="{$i}">·</li>
      </volist>
   </ul>
</div>

　　在HTML中是這樣：

<div id="rotation">
    <div mid="1">
        <a href=""><img 
 
alt="" src="/images/post1.jpg"></a>
        <span>標題</span>
    </div>
    <div mid="2">
        <a href=""><img alt="" src="/images/post2.jpg"></a>
        <span>標題</span>
    </div>
    <div mid="3">
        <a href=""><img 
 
alt="" src="/images/post3.jpg"></a>
        <span>標題</span>
    </div>
    <div mid="4">
        <a href=""><img alt="" src="/images/post4.jpg"></a>
        <span>標題</span>
    </div>
    <ul id="banner-button">
        <li mid="1">·</li>  // 這些是點擊按鈕切換到對應數字的圖片
        <li mid="2">·</li>
        <li mid="3">·</li>
        <li mid="4">·</li>
    </ul>
</div>

　　CSS代碼：

#rotation {
    width: 669px;
    padding: 10px 10px 0 10px;
    border: 1px solid #ccc;
    margin-bottom: 3em;
    box-shadow: 5px 5px 5px #ccc;
    background: #fff;
    position: relative;
}
#rotation a {
    height: 309px;
    overflow: hidden;
    display: inline-block;
}
#rotation img {
    width: 100%;
    height: 100%;
}
#rotation span {
    padding: 10px 0;
    padding-left: 15px;
    font-size: 18px;
    margin: 0;
    color: #666;
    cursor: default;
    display: inline-block;
}
span#tip2, span#tip3 {
    display: none;
}
#img2, #img3 {
    display: none;
}
#rotation ul {
    display: inline-block;
    cursor: default;
    position: absolute;
    bottom: 0;
    right: 10px;
}
#rotation ul li {
    display: inline;
    color: #666;
    font-size: 3em;
    line-height: 38px;
    cursor: pointer;
}
#rotation ul li.active {
    color: #bbb;
}

　　jquery代碼：

var t = button_id = 0, count;
$(document).ready(function(){

    $(‘#rotation div:not(:first)‘).hide();  // 隱藏除了第一個的其他圖片
    $(‘#rotation ul li:first‘).addClass(‘active‘);  // 給按鈕加上樣式
    count = $(‘#rotation div‘).length;  // 計算總數
    $(‘#banner-button li‘).click(function(){
        button_id = $(this).attr(‘mid‘)-1;  // 點擊的是第幾個按鈕
        if ($(‘#rotation div:visible‘).attr(‘mid‘) != button_id+1){ // 排除正在展示的圖片按鈕被點擊
            $(‘#rotation div‘).filter(":visible").hide().parent().children().eq(button_id).fadeIn(1000);  // 隱藏可見的div並顯示對應的div
            $(this).toggleClass("active");  // 給按鈕增加樣式
            $(this).siblings().removeAttr("class");  // 移除之前的樣式
        }
    });

    t = setInterval("show_bann()", 4000);  // 自動執行

　　　 $(‘#rotation‘).hover(function(){
　　　　　 clearInterval(t);
　　 　},function(){
　　　　　 t = setInterval("show_bann()", 4000);
　　　 });

});

function show_bann()
{
    button_id = button_id >=(count -1) ?0 : ++button_id;
    $("#banner-button li").eq(button_id).trigger(‘click‘);
}

　　下面是完成後的樣子，圖片和字每4秒更換，如果鼠標放在上面會取消計時函數，移走後重新計時。

jquery 幻燈片效果