国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

《第31天:JQuery - 輪播圖》

RiverLi / 2972人閱讀

摘要:源碼下載地址鏈接提取碼寫這篇文章,當做是對自已這一天的一個總結寫輪播圖要準備的東西三張尺寸大小一樣的圖片分為三個模塊模塊,模塊,模塊模塊輪播圖引用本地固定的庫引入你寫的文件引入你寫的文件為你本地的圖片路徑,為你圖片的寬度,為類名左滑右滑

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

寫這篇文章,當做是對自已這一天的一個總結.
寫輪播圖要準備的東西:三張尺寸大小一樣的圖片.
分為三個模塊:HTML模塊,CSS模塊,Jquery模塊

HTML模塊:




    
    JQ輪播圖
     //引用本地固定的JQ庫
     //引入你寫的CSS文件
     //引入你寫的JQ文件


    
//src為你本地的圖片路徑,width為你圖片的寬度,class為類名
<
//左滑右滑按鈕
>
    //輪播狀態點

CSS模塊

*{
    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模塊

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"); //不是第四張圖,則根據原本的樣子,來
        }
    }
})


這是我寫輪播圖的一個總結與思路,供大家參考.
希望我們都在進步的路上.

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98605.html

相關文章

  • 31JQuery - 播圖

    摘要:源碼下載地址鏈接提取碼寫這篇文章,當做是對自已這一天的一個總結寫輪播圖要準備的東西三張尺寸大小一樣的圖片分為三個模塊模塊,模塊,模塊模塊輪播圖引用本地固定的庫引入你寫的文件引入你寫的文件為你本地的圖片路徑,為你圖片的寬度,為類名左滑右滑 showImg(https://segmentfault.com/img/bVbi0YG?w=1408&h=363); 源碼下載地址:鏈接:https...

    fuyi501 評論0 收藏0
  • 小白成長日記:一步一步寫個播圖插件

    摘要:并不是所有人寫的代碼或者插件都適合小白使用,比如這是一個的滾動插件,大多數人使用了之后發現滾動不了,去作者提,其實是他們并不懂滾動的原理。 最近在這里看了一篇關于面試的文章《回顧自己三次失敗的面試經歷》,作者三次倒在了輪播圖上。囧,所以我也寫個輪播圖看看。這次是用jQuery寫的,因為最近一直在研究jQuery插件的寫法,所以用jQuery寫的,而且我發現,我vue用太多,完全不熟悉d...

    notebin 評論0 收藏0
  • 回顧自己三次失敗的面試經歷

    摘要:站在這個時間點上,我對自己之前三次失敗的面試經歷做了一次深度回顧。關于我第三次面試失敗的經歷,依然是與輪播圖有關。當然,這次思特奇面試之旅,最后也是以失敗告終,這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時間的齒輪已經來到了2017年的11月份,距離2018年僅僅還剩下不到兩...

    DC_er 評論0 收藏0
  • 回顧自己三次失敗的面試經歷

    摘要:站在這個時間點上,我對自己之前三次失敗的面試經歷做了一次深度回顧。關于我第三次面試失敗的經歷,依然是與輪播圖有關。當然,這次思特奇面試之旅,最后也是以失敗告終,這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時間的齒輪已經來到了2017年的11月份,距離2018年僅僅還剩下不到兩...

    spacewander 評論0 收藏0

發表評論

0條評論

RiverLi

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<