1. 程式人生 > >jQuey實現輪播圖效果

jQuey實現輪播圖效果

再平常的瀏覽器頁面,輪播圖都是必不可缺少的一個板塊,在這總結了一下輪播圖基本的一些樣式

首先介紹一下,本文實現的輪播圖的基本效果  

  1. 3s自動切換圖片,圖片切換時提示點跟隨切換   2. 滑鼠劃到圖片上,自動切換輪播圖停止   3. 指示點劃過切換對應的圖片,圖片切換時提示點跟隨切換   4. 點選上一頁下一頁按鈕切換圖片   5. 圖片切換時有漸變的效果

下表面開始程式碼的書寫

css程式碼

/*初始化瀏覽器預設樣式*/
*{
    margin: 0;
    padding: 0
; } /*sowingMap*/ .sowingMap{ width: 800px; height: 500px; margin: 0 auto; position: relative; overflow: hidden; } /*imgPart*/ .imgPart{ width: 800px; height: 500px; position: absolute; } /*imgSwitch*/ .imgSwitch{ width: 800px; height: 500px; position: absolute
; list-style: none; display: none; cursor: pointer; } .imgSwitch img{ width: 100%; height: 500px; } .imgShow{ display: block; } /*spotPart*/ .spotPart{ position: absolute; bottom: 0; height: 40px; left: 36%; } .spotPart p{ width: 20px; height
: 20px; border-radius: 100%; background-color: #fff; float: left; margin-left: 20px; cursor: pointer; } /*提示點的選中顏色*/ .spotPart .spotColor{ background-color: #f00; } /*上一張下一張切換部分*/ .preImg , .nextImg{ width: 70px; height: 70px; border-radius: 100%; background-color: rgba(255,255,255,0.5); text-align: center; line-height: 70px; font-size: 30px; color: #f5f5f5; position: absolute; top: 190px; cursor: pointer; display: none; } .preImg{ left: -35px; text-indent: 25px; } .nextImg{ right: -35px; text-indent: -25px; }
css程式碼塊

html程式碼

<div class="sowingMap">
        <ul class="imgPart">
            <li class="imgSwitch imgShow"><img src="img/1.jpg"/></li>
            <li class="imgSwitch"><img src="img/2.jpg"/></li>
            <li class="imgSwitch"><img src="img/3.jpg"/></li>
            <li class="imgSwitch"><img src="img/4.jpg"/></li>
            <li class="imgSwitch"><img src="img/5.jpg"/></li>
      </ul>
      <div class="spotPart">
            <p class="spotColor"></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
      </div>
      <div class="loopChange">
             <p class="preImg">&lt;</p>
             <p class="nextImg">&gt;</p>
      </div>
</div>

輪播圖功能實現的js程式碼

//獲取元素的個數
var count = $('.imgSwitch').length;
var num = 0;
var start = null;
//業務1:實現3s鍾自動迴圈切換圖片,圖片切換時提示點跟隨切換,圖片切換時有漸變的效果
function loopStart() {
    clearInterval(start);
    start = setInterval(function() {
        //首先清楚所有樣式
        $('.imgSwitch').hide();
        //取餘方式對num取值進行判斷
        num = (num + 1) % count;
        //圖片漸入
        $('.imgSwitch').eq(num).fadeIn(1000);
        $('.spotPart p').eq(num).addClass("spotColor").siblings().removeClass("spotColor");
    }, 2000);
}
loopStart();

//業務2:滑鼠劃到圖片上,輪播圖停止自動切換,劃出後繼續播放
$('.imgSwitch').mouseover(function() { //滑鼠劃過停止
    clearInterval(start);
});
$('.imgSwitch').mouseout(function() { //滑鼠劃出
    loopStart();
});

//業務三:指示點劃過切換對應的圖片,圖片切換時提示點跟隨切換
$('.spotPart p').mouseover(function() {
    clearInterval(start);
    //首先清楚所有樣式
    $('.imgSwitch').hide();
    $('.imgSwitch').eq($(this).index()).fadeIn(1000);
    $('.spotPart p').eq($(this).index()).addClass("spotColor").siblings().removeClass("spotColor");
});
$('.spotPart p').mouseout(function() {
    loopStart();
});
//業務四:點選上一頁下一頁切換
$('.sowingMap').mouseover(function() {
    clearInterval(start);
    $('.loopChange p').show();
});
$('.sowingMap').mouseout(function() {
    loopStart();
    $('.loopChange p').hide();
});
$('.preImg').click(function() {
    $('.imgSwitch').hide();
    if(num <= 0) {
        num = 4;
        $('.imgSwitch').eq(num).fadeIn(1000);
        $('.spotPart p').eq(num).addClass("spotColor").siblings().removeClass("spotColor");
    }
    else if(num <= 4) {
        $('.imgSwitch').eq(num-1).fadeIn(1000);
        $('.spotPart p').eq(num-1).addClass("spotColor").siblings().removeClass("spotColor");
        num--;
    }
});
$('.nextImg').click(function() {
    $('.imgSwitch').hide();
    if(num >= 4) {
        num = 0;
        $('.imgSwitch').eq(num).fadeIn(1000);
        $('.spotPart p').eq(num).addClass("spotColor").siblings().removeClass("spotColor");
    }
    else if(num >= 0) {
        $('.imgSwitch').eq(num+1).fadeIn(1000);
        $('.spotPart p').eq(num+1).addClass("spotColor").siblings().removeClass("spotColor");
        num++;
    }
});

注意,不要忘記引入jquery的語法庫,不然會報錯的喲!!!

對於上述索引範圍的判斷,介紹一種簡單的辦法,此種辦法,使用的時一個數取於所獲的元素的length值,不管如何,他的範圍只是會0~a.length之間

num = (num + 1) % count;

ok,很方便的使用jQuery實現了輪播圖效果,歡迎您提出寶貴的意見!!!