由於經常使用插件來制作輪播圖，所以把這個輪播圖的代碼記好。使用了淡入淡出的方式

HTML:

<div class="Slides">
    <ul class="pics">
        <li ><img src="img/banner1.jpg" width="1920px" height="500px"></li>
        <li ><img src="img/banner1.jpg"  width="1920px" height="500px"></li>
        <li ><
 
img src="img/banner1.jpg"  width="1920px" height="500px"></li>
    </ul>
    <div id="buttons">
        <span  class="picsli on" index="1"></span>
        <span  class="picsli" index="1"></span>
        <span  class="picsli" index="1"></span>
    </div
 
>
    <a id="prev" class="unslider-arrow04 prev "><img src="img/l.png"></a>
    <a id="next" class="unslider-arrow04 next"><img src="img/r.png"></a>
</div>

CSS:

.Slides{
    border-top:10px  solid #533336;
    clear: both;

    position: relative;
}
.pics{
   width: 1920px;
    height: 500px;
    overflow: hidden;

}
#buttons{
    position: absolute;
    height: 10px;
    width: 100px;
    z-index:2;
    bottom: 80px;
    left: 50%;
    margin-left: -36px ;
}
#buttons .on {
    background: #fff;
}
#buttons span{
    cursor: pointer;
    float: left;
    border: 2px solid #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #333;
    margin-right: 8px;
}
#next{
    position: absolute;
    right: 0;
    top: 40%;
}
#next :hover{
    background-color: white;
    opacity: 0.5%;
}
#prev{
    position: absolute;
    float: left;
    top: 40%;
}
#prev :hover{
    background-color: white;
    opacity: 0.5%;
}
 

JQ:

$(function(){
    //賦予變量
    var i = 0;

    function run(){
        i++;
        //判斷，讓圖片循環播放，還可以用三元表達式寫
        // if(i==5){
        //     i=0;
        // };
        i= (i==3)?0:i;
        // 讓i號圖片顯示，讓它的兄弟元素隱藏

        $(".pics li").eq(i).fadeIn(1000).siblings("li").fadeOut(1000);
        //讓li變紅
        $("#buttons span").eq(i).addClass("on").siblings("span").removeClass("on");
    }
    //設置定時器，自動輪播

    var timer = setInterval(run,5000);

    //給鼠標加入移入事件
    $(".pics li").mouseenter(function(){
        var jqthis = $(this);
        clearInterval(timer);
        //鼠標快速移動小bug
        tt = setTimeout(function(){

            //停止定時器
            //如果$(this)寫在定時器裏，那它指向的就是定時器
            i = jqthis.index();
            // 讓i號圖片顯示，讓它的兄弟元素隱藏,stop()清除累加動作；
            $(".pics li").eq(i).stop().fadeIn(1000).siblings("li").stop().fadeOut(1000);
            //讓li變紅
            $("#buttons span").eq(i).addClass("on").siblings("span").removeClass("on");
        },200)

    })
    //鼠標移出事件
    $(".pics li").mouseleave(function(){
        //清除定時炸彈，這是為了解決鼠標快速滑動的小bug
        clearTimeout(tt);
        //恢復定時器
        timer = setInterval(run,5000);
    })


    //左右切換
    $("#prev").click(function(){
        clearInterval(timer);
        i--;
        //判斷，讓圖片循環播放，還可以用三元表達式寫
        // if(i==-1){
        //     i=4;
        // };
        i= (i==-1)?2:i;
        // 讓i號圖片顯示，讓它的兄弟元素隱藏
        $(".pics li").eq(i).stop().fadeIn(1000).siblings("li").stop().fadeOut(1000);
        //讓li變紅
        $("#buttons span").eq(i).addClass("on").siblings("span").removeClass("on");


    });

    $("#next").click(function(){
        clearInterval(timer);
        //debugger
        run();


    });

})

使用jQuery進行輪播圖