《第31天：JQuery - 輪播圖》

時間 2019-12-06

標籤 31天 jquery 欄目 JQuery 简体版

原文原文鏈接

源碼下載地址：
連接：https://pan.baidu.com/s/16K9I...
提取碼：0ua2 javascript

寫這篇文章，當作是對自已這一天的一個總結.
寫輪播圖要準備的東西：三張尺寸大小同樣的圖片.
分爲三個模塊：HTML模塊，CSS模塊，Jquery模塊css

HTML模塊：html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQ輪播圖</title>
    <script type="text/javascript" src="jq/jquery-3.1.1.min.js"></script> //引用本地固定的JQ庫
    <link rel="stylesheet" type="text/css" href="css/broadcast.css"> //引入你寫的CSS文件
    <script src="jq/broadcast.js"></script> //引入你寫的JQ文件
</head>
<body>
    <div class="photo_box">
        <div class="img">
            <img src="img/1.jpg" width="1380px" class="pic"> //src爲你本地的圖片路徑，width爲你圖片的寬度，class爲類名
            <img src="img/2.jpg" width="1380px" class="pic">
            <img src="img/3.jpg" width="1380px" class="pic">
            <img src="img/1.jpg" width="1380px" class="pic">
        </div>
        <div>
            <div class="btn btn1">&lt;</div> //左滑右滑按鈕
            <div class="btn btn2">&gt;</div>
        </div>
        <ul class="tab"> //輪播狀態點
            <li></li>
            <li></li>
            <li></li>
        </ul>    
    </div>
</body>
</html>

CSS模塊java

*{
    padding:0; //初始化CSS樣式
    margin:0;
    list-style: none;
}
.photo_box{
    margin: 0 auto; //全有在這個盒子裏的元素居中
    width: 1380px;  //設置盒子的寬度爲圖片的寬度
    height: 350px;  //設置盒子的高度爲圖片的高度
    overflow: hidden; //超出的部分隱藏
    position: relative; //定位爲相對定位
    border:3px solid #000; //設置邊框
}

.img{
    width: 5520px;  //設置圖片加起來的總寬度
    height: 350px;  //設置爲單張圖片的高度
    position: absolute; //定位爲絕對定位，是相對於photo_box的盒子來改變的
    left: 0px; //對於photo_box的左邊間距爲0
    top: 0px; //對於photo_box的上邊間距爲0
}
.img img{
    float: left; //圖片爲左浮動，變成在同一條水平線上
}
.tab{
    position: absolute; //定位爲絕對定位，是相對於photo_box的盒子來改變的
    top: 320px;  //對於photo_box的上邊間距爲0
    left: 45%;  //對於photo_box的左邊間距爲0
}
.tab li{
    width: 10px; //正方形的寬度爲10px
    height: 10px; //正方形的高度爲10px
    border: 2px solid #ffffff; //邊框的寬度爲2px
    border-radius: 100%; //正方形的圓角值爲100%，則正方形變爲原型
    float: left; //li左浮動
    margin-right: 8px; //圓點之間相互的間距爲8px

}
.btn{
    width: 50px; //正方形的寬度爲50px
    height: 50px; //正方形的高度爲50px
    background-color: rgba(0,0,0,0.5);     //背景顏色
    color: #ffffff;     //字體顏色
    font-size: 28px;     //字體大小
    line-height: 46px;     //行高
    text-align: center;    //居中
    position: absolute;    //絕對定位
    top: 150px;           //距離頂部的高度爲150
    border-radius: 100%;  //正方形的圓角值爲100%，則正方形變爲原型
    cursor: pointer;      //移動到該目標時，變爲手指形狀
}
.btn:hover{
    background-color: #FCC35E; 
}
.btn1{
    left: 150px;//對於photo_box的左邊間距爲150px
}
.btn2{
    right: 150px;//對於photo_box的右邊間距爲150px
}
.bg{
    background-color: #FCC35E;//圓點輪播點的顏色
}

JQuery模塊jquery

var i=0;     //設置一個全局的I
var Timer;   //聲音一個計時器
$(function(){
    // var clone = $(".img img").first().clone(); 這是克隆第一張圖片
    // $(".img").append(clone);//把克隆的圖片放入圖片集中
    var length = $(".pic").length; //獲取圖片的張數
    $(".tab li").first().addClass('bg');//開始就是第一張

    var Timer=setInterval(function(){ //設定計時器
        i++; //i存的是第幾張圖片
        move(); //圖片滑動的方法
    },1000);
    //鼠標劃入圓點
    $(".tab li").mouseenter(function() {
    var index = $(this).index(); //獲取當前輪播的圖片到第幾張
    console.log(index);
    var i=index; //把這個第幾張賦值到i
    console.log(i);
    $(".img").stop().animate({left:-i*1380},500);//經過index就能夠知道要把left改成多少，此次輪播圖的原理就是經過改變left來改變顯示的東西
    $(this).addClass("bg").siblings().removeClass('bg'); //給相對應的圓點增長背景顏色
    /*自動輪播*/
    
});
     
    //對banner定時器的操做
    $(".photo_box").hover(function(){
        clearInterval(Timer); //一旦鼠標進入到輪播頁後，清除計時器
    },function(){
        Timer=setInterval(move,2000);//離開輪播頁後，從新加入定時器
    })

    /*向左按鈕*/
    $(".btn1").click(function(){ //點擊向左的按鈕
        i--; //此時i的數量減掉1
        move();//根據i來移動
    })
   
    /*向右按鈕*/
     $(".btn2").click(function(){//點擊向右的按鈕
        i++;  //此時i的數量加1
    })
    
    function move(){
        if(i==length){
            $(".img").css({left:0});
            i=1; //若是i的值爲圖片的張數，則此時i是第四張，因此它的下一張應該爲i=1，即第二張圖
        } 
        if(i==-1){
            $(" .img").css({left:-(length-1)*1380});
            i=length-2;
        } //若是i=-1，則length爲第三張圖，因此是減掉2

        $(".img").stop().animate({left:-i*1380},500); //根據i來移動它的left

        if(i==length-1){
            $(".tab li").eq(0).addClass('bg').siblings().removeClass('bg'); //若是i爲第四張圖，則小圓點爲第一個
        }else{
            $(".tab li").eq(i).addClass('bg').siblings().removeClass('bg'); //不是第四張圖，則根據本來的樣子，來
        }
    }
})

這是我寫輪播圖的一個總結與思路，供你們參考.
但願咱們都在進步的路上.app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。