jQuey實現輪播圖效果

時間 2019-11-13

標籤 jquey 實現效果简体版

原文原文鏈接

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

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

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

下表面開始代碼的書寫瀏覽器

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++;
    }
});