jquery實現簡單定時輪播圖

JS

$(document).ready(function(){
    var index = 0;   //剛開始設置一個index，index為圖片的索引值
    $(".pictureDemo img").hide();
    $(".pictureDemo img").eq(index).show();      //當圖片索引為0時,顯示對應的圖片,其他的隱藏

    //設置一個定時器
    timer = setInterval(function(){
        var imgObj = $(".pictureDemo img");
    //通過index的值進行循環
        index++;
        if(index>1){
            index = 0;
        }
        imgObj.fadeOut(1000);    
        imgObj.eq(index).fadeIn(1000);
    },2000) 

})

html

<div class = "pictureDemo">
                <img src = "img/tbdemo.jpg">
                <img src = "img/tbdemo2.jpg">
</div>

css

.pictureDemo{
                height:300px;
                width:90%;
                margin:90px auto 0;
                position:relative;
            }
.pictureDemo img{
                height:100%;
                width:100%;
                position:absolute;
                
            }

注：css里面position要設置好，不然兩張照片位置不一！