jQuery的滾動懸停效果

<script>
    var index=0;
    var timer = playerAdvert();

    //鼠標效果
    $("#carousel_list a img").mouseenter(function () {
        // 鼠標移入
        clearInterval(timer);
    }).mouseleave(function () {
        // 鼠標移出
        timer = playerAdvert();
    });
//把 切換效果 封裝
function playerAdvert(){
    return setInterval(function(){
        if(index >= 4){
            index = 0;
        }
        $("#carousel_list a").hide();
        $("#carousel_list a").eq(index).show();
        index++;
    }, 1000);
}

</script>


<!--HTML部分-->
<!-- 輪播-->
<div id="carousel">
    <div id="carousel_list">
        <a href="#"><img src="images/carousel_01.jpg" alt="淘寶1號"></a>
        <a href="#"><img src="images/carousel_02.jpg" alt="淘寶2號"></a>
        <a href="#"><img src="images/carousel_03.jpg" alt="淘寶3號"></a>
        <a href="#"><img src="images/carousel_04.jpg" alt="淘寶4號"></a>
    </div>
</div>


<!--CSS部分-->
#carousel{
    width: 520px;
    height: 280px;
    border:1px solid #666;
    /*overflow:hidden;*/
}

#carousel_list a {
    display:block;
}
#carousel_list a img{
    border: 0px;
    float: left;
}
/*四張照片都重疊*/
#carousel_list a{
    position:absolute;
}



發佈了26 篇原創文章 · 獲贊 1 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章