jQuery無縫輪播圖思路詳解-唯品會

效果圖如上：

需求：圖片自動輪播，鼠標移上停止播放，離開恢復播放，箭頭切換圖片。

html代碼

<!--輪播圖大盒子開始-->
<div class="wrap">
    <!--大盒子上部分輪播圖-->
    <div class="wrapUp">
        <ul>
            <li class="cur"><a href="#"><img src="images/banner/banner01.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner/banner02.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner/banner03.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner/banner04.jpg" alt=""></a></li>
        </ul>
        <span class="btn left">&lt;</span>
        <span class="btn right">&gt;</span>
    </div>
    <!--大盒子下部分標題-->
    <div class="wrapDown">
        <ol>
            <li class="cur">大牌特惠</li>
            <li>住進北歐</li>
            <li>綿綿愛意</li>
            <li>母嬰盛宴</li>
        </ol>
        <!--底部紅色下划線-->
        <span class="line"></span>
    </div>
</div>

CSS樣式代碼

<style>
        *{margin: 0;padding:0;list-style: none}
        /*設置頁面圖片背景*/
        body{background:url("images/banner/bg.jpg")no-repeat center top;}
        /*大盒子樣式寬高,盒子投影，內邊距*/
        .wrap{width: 1170px;height: 452px;background:rgba(255,255,255,0.5);margin:30px auto;
        padding:12px 12px 0;box-sizing:border-box;box-shadow:0 0 10px rgba(0,0,0,0.4);overflow: hidden}
/*圖片盒子寬高，定位樣式*/
        .wrapUp{width: 1146px;height: 400px;position: relative;}
        .wrapUp li{position:absolute;left:0;top:0;display: none;}
        .wrapUp .cur{display: block;}
        /*盒子兩邊箭頭樣式*/
        .wrapUp .btn{width: 33px;height: 66px;background:rgba(0,0,0,0.2);
        position: absolute;color:#ffffff;font-size: 40px;line-height: 66px;text-align: center;
            font-family:"黑體";border-radius:5px;top:50%;transform:translateY(-50%);cursor: pointer;transition:0.3s}
        /*盒子左箭頭樣式*/
        .wrapUp .left{left: -45px}
        .wrapUp .right{right: -45px}
        /*盒子移入顯示*/
        .wrap:hover .wrapUp .left{left:0}
        .wrap:hover .wrapUp .right{right:0}
        /*盒子不透明度變化*/
        .wrapUp .btn:hover{background:rgba(0,0,0,0.4);}


        /*大盒子下部分標題樣式*/
        .wrapDown{width: 800px;height: 40px;margin:0 auto;position: relative}
        /*大盒子下部分內容li樣式*/
        .wrapDown li{width: 200px;height: 40px;font-size: 15px;line-height: 40px;float: left;text-align: center;color: #666666;position: relative;cursor: pointer}
        /*每個li后面的分割線樣式*/
        .wrapDown li:after{content:"|";position: absolute;right: 0;top:0;color: #cccccc}
        /*設置第一個li字樣式*/
        .wrapDown .cur{color:red;}
        /*最后一個li不需要分割線*/
        .wrapDown li:last-child:after{display: none}
        /*底部紅色下划線相對於底部盒子定位*/
        .wrapDown .line{width: 200px;height: 2px;background:deeppink;left: 0;bottom:-1px;position: absolute}
    </style>

jQuery代碼

<script>
    //鼠標以上通過索引值切換
    //圖片
    //當前文字顏色
    $(".wrapDown li").mouseenter(function () {
        //定義變量接收索引值
        var index=$(this).index();
        console.log(index);
        play(index);
        //根據索引值圖片
      /*  $(".wrapUp li").eq(index).stop().fadeIn().siblings().stop().fadeOut();
        //文字切換
        $(".wrapDown li").eq(index).addClass("cur").siblings().removeClass("cur");
        //滑動線切換
        $(".line").stop().animate({left:index*200},100)*/
    });
    //把切換封裝成一個函數


    //自動播放
    //定義播放
    function play(aaa){
        $(".wrapUp li").eq(aaa).stop().fadeIn().siblings().stop().fadeOut();
        //文字切換
        $(".wrapDown li").eq(aaa).addClass("cur").siblings().removeClass("cur");
        //滑動線切換
        $(".line").stop().animate({left:aaa*200},100)
    }
    var timer=null;//先設置個定時器timer 讓值為空
    var num=0;//需要有一個索引數字控制它動，初始為0
    var len=$(".wrapDown li").length;//需要有一個索引值和num對比,為li的個數。
    //封裝自定義播放動畫
    function autoplay() {
        timer=setInterval(function () {//此處的timer是給定時器賦值
            num++;
            if(num>len-1){num=0;}
            play(num);
            console.log(num);
        },1000);
    }

//鼠標以上停止,鼠標離開調用自動播放
    $(".wrap").hover(function () {
        clearInterval(timer);
    },function () {
        autoplay();
    });
//箭頭點擊切換圖片
    $(".right").click(function () {
        num++;
        if(num>len-1){num=0;}
        play(num);
    });
    $(".left").click(function () {
        num--;
        if(num<0){num=len-1;}
        play(num);
    });
</script>

 

html部分步驟：
1、新建大盒子，上部分包裹輪播圖和底部四個標題選項和紅色 下划線。
1.1輪播圖div盒子部分包含兩個箭頭用兩個span包裹。
1.2輪播圖部分div用ul插入四張圖。
2、大盒子下部分是標題部分。

css樣式步驟分析：
版心大盒子樣式
版心部分，要給高和內邊距，背景色為白色半透明，盒子投影。
盒子內邊距部分，給圖片一個寬，增加圖片的內邊距后，盒子寬度增加所以要用border-box內減去。半透明背景rgba(255,255,255,0.5);
盒子投影：box-shadow:0 0 5px rgba(0,0,0,0.3) }
第一個值是水平，第二值是垂直，第三個值模糊程度，第四個值是顏色。
圖片盒子樣式
四張圖是淡入淡出可以用絕對定位將所有圖片放在一起。
給圖片盒子設置圖片的寬高，然后給盒子相對定位，給li絕對定位，left,top為0。顯示在第一張的是最后一個li的圖片，因為層級關系。
給所有li設置隱藏。給第一個li添加類名設置display顯示。
箭頭盒子樣式
箭頭span相對於圖片盒子定位后寬高才可以生效，有圓角和寬高，黑色半透明。
箭頭變大設置font-family:"黑體"。
箭頭盒子居中top:50%和transform:translateY(-50%);X是水平偏移，Y垂直偏移
箭頭盒子是在外面，鼠標進入大盒子箭頭顯示，.wrap:hover .wrapUp .left{left:0}意思是
鼠標進入大盒子wrap控制左邊箭頭。然后給箭頭盒子設置過渡動畫。
鼠標移上，箭頭盒子不透明度變化，調整不透明值。
圖片底部標題樣式
根據標題數量設置盒子的寬度高度，然后用偽類元素after和定位設置每個li后面的分割線。

JS代碼部分
通過底部li的索引切換圖片、文字顏色和底部紅色滑動線位置。
1、鼠標移入底部li，var index=$(this).index();
2、根據索引值圖片切換
$(".wrapUp li").eq(index).stop().fadeIn().siblings().stop().fadeOut();
圖片、綁定的索引、淡入、其它兄弟淡出
3、文字切換,第一個li文字添加樣式類名
$(".wrapDown li").eq(index).addClass("cur").siblings().removeClass("cur");
4、滑動線滑動切換
$(".line").stop().animate({left:index*200},100)
往右邊滑動，移動index*滑動線寬度的距離。
用戶觸發的一般都要加stop()

定時器自動播放
格式：
需要一個變量var Timer=null；
然后再需要一個變量var num=0;需要有一個數字控制圖片動，初始為0
一共4個圖，所以要num++；而且要在定時器里面做一個如果num大於索引值最大為3的判斷，num就變成0，這樣圖片會從第一張重新開始播放。
setInterval為定時調用的函數,調用執行文字圖片滑動線的切換。