溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jquery實現(xiàn)多模塊切換輪播

發(fā)布時間：2020-06-15 12:17:43 來源：網(wǎng)絡(luò) 閱讀：1552 作者：無憂you 欄目：web開發(fā)

說兩句廢話：對于一個小白癡來說，get這些知識真的是有點費勁，我還沒學(xué)jquery，看了這對應(yīng)的公開課后，自己敲了一天才整理好，希望總結(jié)后更上一層樓。

資料下載地址：
鏈接：https://pan.baidu.com/s/1HvfJrGowK4gjQGE17nFHOw 密碼：rw8a

為了以防萬一，下邊有所有 的資料，可自行選擇下載。

最后要完成的效果圖：
jquery實現(xiàn)多模塊切換輪播

效果圖說明：

  • 左邊的框框會一個一個的往后走，第一個（南京）有一個默認的深紅色的背景。
  • 可以隨意的點擊框框
  • 右邊的圖片和左邊的框框是對應(yīng)的，框框動，相應(yīng)的圖片也會展示出來
  • 點擊右邊的左箭頭和右箭頭圖片進行相應(yīng)的切換，左邊的框框也跟著動

注：寫jquery首先引入包

宏觀分析：

  1. 先搞定左邊的自動輪播，用到計時器 setInterval(函數(shù)名，時間)（get新知識）
  2. 隨機點擊左邊的圖片，右側(cè)顯示左側(cè)點擊的模塊
  3. 點擊右邊的按鈕，左側(cè)顯示右側(cè)點擊的模塊

詳細分析：
右側(cè)的圖片是怎樣動的？為什么每次顯示一張圖片，其他的哪去了？
其實用的隱藏功能！css里邊有個overflow：hidden
圖片是這樣動的：
jquery實現(xiàn)多模塊切換輪播
寬度沒畫好，簡單說一下：
右邊顯示圖片的框框是不動的，動的是來回輪播的圖片。

  1. 我們給第一張圖片設(shè)置默認索引為 0 ，運動時間為3秒（3000毫秒，程序里用的是毫秒），即3秒后索引 +1 ，這樣就顯示下一張圖片了。
    顯示下一張圖片還需要做一些處理：
    運動的小框框要加載索引的樣式，其他的同級的都去掉索引樣式。
    animate（get新技能），可以讓圖片動起來，我們設(shè)置的是向左移動，可以自行設(shè)置向右移動，移動多少才合適呢？當(dāng)然是圖片的寬度，也就是當(dāng)前索引*圖片的寬度（我們的圖片是固定寬度的）
    另外：因為索引是++的，加到索引最大值后呢？我們可以做個判斷，當(dāng)超出索引長度的時候，索引在從 0 開始
function showCur() {
        //移動到當(dāng)前的塊上，加上list_cutL索引，同級的去掉list_cutLi索引
        $(".list-left ul li").eq(curItem).addClass("list_cutLi").siblings("li").removeClass("list_cutLi");
        //一張圖片寬268，*索引就是移動的寬度
        var leftVal = 268 * curItem;
        //$(".right-box-main").css('left', -leftVal);
        //0.5秒內(nèi)向左移動圖片
        $(".right-box-main").animate({ left: -leftVal }, 500);
    };
var curItem = 0;/*索引*/
    var len = $(".list-left ul li").length;  //索引的長度  12
    function autoPlay() {
        curItem++;
        if (curItem > len-1) {
            curItem = 0;
        };
        /**
        eq獲取索引，從第一個開始
        siblings獲取同輩元素
        */
        showCur();
    };
    setInterval(autoPlay, 3000);

2.那么剩下 的就簡單多了
解決點擊左邊的框框，右邊 的圖片也會跳到點擊的圖片

獲取點擊的當(dāng)前圖片的索引值，然后調(diào)用showCur方法即可
index()，get新技能，獲取當(dāng)前索引值和參數(shù)

$(".list-left ul li").click(function () {
        curItem = $(this).index();
        showCur();
    });

3.解決最后一個問題
點擊右邊的按鈕，左邊加載相應(yīng)的模塊

點擊左按鈕：索引要 -1，加判斷條件；
點擊右按鈕：索引要 +1，加判斷條件。

$(".list-right .left-btn").click(function () {
        curItem--;
        if (curItem < 0) {
            curItem = len - 1;
        }
        showCur();
    });
    //右按鈕
    $(".list-right .right-btn").click(function () {
        curItem++;
        if (curItem > len - 1) {
            curItem = 0;
        }
        showCur();
    });

大功告成，下邊是最重要的部分，源碼和圖片

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jquery多模塊切換輪播</title>
    <link type="text/css" rel="stylesheet" href="css/style.css" />
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/demo.js"></script>

</head>
<body>
    <div  class="box">
        <div class="city-lists">
            <div class="list-title">多區(qū)塊點擊切換</div>
            <div class="list-left">
                <ul>
                    <li class="list_cutLi">南京</li>
                    <li>上海</li>
                    <li>武漢</li>
                    <li>西安</li>
                    <li>長春</li>
                    <li>大連</li>
                    <li>成都</li>
                    <li>杭州</li>
                    <li>沈陽</li>
                    <li>合肥</li>
                    <li>長沙</li>
                    <li>鄭州</li>
                </ul>
            </div>
            <div class="list-right">
                <div class="list-right-t">
                    <a class="left-btn"></a>
                    <div class="right-box">
                        <div class="right-box-main">
                            <ul>
                                <li>
                                    <div class="bc_chgTitle">南京基地</div>
                                    <a href="#"><img src="image/bd_photo1.jpg"/></a>
                                    <p><a href="#">介紹北大資源研修學(xué)院位于北京市中關(guān)村北區(qū)核心地帶，占地面積近200畝，擁有30多間標(biāo)準(zhǔn)化多媒體教室、2-6人間學(xué)生...</a></p>
                                </li>
                                <li>
                                    <div class="bc_chgTitle">上?；?lt;/div>
                                    <a href="#"><img src="image/bd_photo2.jpg" /></a>
                                    <p><a href="#">介紹北大資源研修學(xué)院位于北京市中關(guān)村北區(qū)核心地帶，占地面積近200畝，擁有30多間標(biāo)準(zhǔn)化多媒體教室、2-6人間學(xué)生...</a></p>
                                </li>
                                <li>
                                    <div class="bc_chgTitle">武漢基地</div>
                                    <a href="#"><img src="image/bd_photo3.jpg" /></a>
                                    <p><a href="#">介紹北大資源研修學(xué)院位于北京市中關(guān)村北區(qū)核心地帶，占地面積近200畝，擁有30多間標(biāo)準(zhǔn)化多媒體教室、2-6人間學(xué)生...</a></p>
                                </li>
                                <li>
                                    <div class="bc_chgTitle">西安基地</div>
                                    <a href="#"><img src="image/bd_photo4.jpg" /></a>
                                    <p><a href="#">介紹北大資源研修學(xué)院位于北京市中關(guān)村北區(qū)核心地帶，占地面積近200畝，擁有30多間標(biāo)準(zhǔn)化多媒體教室、2-6人間學(xué)生...</a></p>
                                </li>
                                <li>
                                    <div class="bc_chgTitle">長春基地</div>
                                    <a href="#"><img src="image/bd_photo5.jpg" /></a>
                                    <p><a href="#">介紹北大資源研修學(xué)院位于北京市中關(guān)村北區(qū)核心地帶，占地面積近200畝，擁有30多間標(biāo)準(zhǔn)化多媒體教室、2-6人間學(xué)生...</a></p>
                                </li>
                                <li>
                                    <div class="bc_chgTitle">大連基地</div>
                                    <a href="#"><img src="image/bd_photo6.jpg" /></a>
                                    <p><a href="#">介紹北大資源研修學(xué)院位于北京市中關(guān)村北區(qū)核心地帶，占地面積近200畝，擁有30多間標(biāo)準(zhǔn)化多媒體教室、2-6人間學(xué)生...</a></p>
                                </li>
                                <li>
                                    <div class="bc_chgTitle">成都基地</div>
                                    <a href="#"><img src="image/bd_photo5.jpg" /></a>
                                    <p><a href="#">介紹北大資源研修學(xué)院位于北京市中關(guān)村北區(qū)核心地帶，占地面積近200畝，擁有30多間標(biāo)準(zhǔn)化多媒體教室、2-6人間學(xué)生...</a></p>
                                </li>
                                <li>
                                    <div class="bc_chgTitle">杭州基地</div>
                                    <a href="#"><img src="image/bd_photo2.jpg" /></a>
                                    <p><a href="#">介紹北大資源研修學(xué)院位于北京市中關(guān)村北區(qū)核心地帶，占地面積近200畝，擁有30多間標(biāo)準(zhǔn)化多媒體教室、2-6人間學(xué)生...</a></p>
                                </li>
                                <li>
                                    <div class="bc_chgTitle">沈陽基地</div>
                                    <a href="#"><img src="image/bd_photo4.jpg"  /></a>
                                    <p><a href="#">介紹北大資源研修學(xué)院位于北京市中關(guān)村北區(qū)核心地帶，占地面積近200畝，擁有30多間標(biāo)準(zhǔn)化多媒體教室、2-6人間學(xué)生...</a></p>
                                </li>
                                <li>
                                    <div class="bc_chgTitle">合肥基地</div>
                                    <a href="#"><img src="image/bd_photo3.jpg" /></a>
                                    <p><a href="#">介紹北大資源研修學(xué)院位于北京市中關(guān)村北區(qū)核心地帶，占地面積近200畝，擁有30多間標(biāo)準(zhǔn)化多媒體教室、2-6人間學(xué)生...</a></p>
                                </li>
                                <li>
                                    <div class="bc_chgTitle">長沙基地</div>
                                    <a href="#"><img src="image/bd_photo2.jpg" /></a>
                                    <p><a href="#">介紹北大資源研修學(xué)院位于北京市中關(guān)村北區(qū)核心地帶，占地面積近200畝，擁有30多間標(biāo)準(zhǔn)化多媒體教室、2-6人間學(xué)生...</a></p>
                                </li>
                                <li>
                                    <div class="bc_chgTitle">鄭州基地</div>
                                    <a href="#"><img src="image/bd_photo1.jpg" /></a>
                                    <p><a href="#">介紹北大資源研修學(xué)院位于北京市中關(guān)村北區(qū)核心地帶，占地面積近200畝，擁有30多間標(biāo)準(zhǔn)化多媒體教室、2-6人間學(xué)生...</a></p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <a class="right-btn"></a>
                </div>

            </div>
        </div>
    </div>
</body>
</html>

css/style.css


body{
    line-height:150%;margin:0;padding:0;
}

h2,h3,h4,h5,h6,h7,dl,dt,dd,ul,li,p,span,i,em{margin:0;padding:0;font-style:normal;}
h2,h3,h4,h5,h6,h7{font-size:14px;}
dl,dt,dd,ul,li{list-style-type:none;display:block;}

a{
    color:#000;
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}

.box{
    clear:both;
    margin:0 auto; 
}
.city-lists{
    width:916px;
    height:408px;
    background:#E7E2DF;
    margin:0 auto;
    position:relative;
}

.list-title{
    font: 18px/45px "微軟雅黑";
    color: rgb(255, 255, 255);
    width:610px;
    height:45px;
    top:-1px;
    left:-1px;
    padding: 0px 14px 14px;
    z-index:100;
    background:url(../image/bd_bg1.jpg) no-repeat;
    position:absolute;/*absolute如果最近的父元素沒有定義，則相對于html絕對定位，好處是可以釋放位置，所以下邊的list-left可以沾滿整個高度*/
}
.list-left{
    height: 344px; 
    width: 552px; 
    float:left;
    background:#F9F1E6;
    position:absolute;
    padding-top:64px;
    padding-left:25px;
}

.list-left ul li{
    color:#fff;
    height: 107px; 
    width: 130px;
    font:18px/107px "溫軟雅黑";
    float:left;
    text-align:center;
    background: #707070;
    margin:0px 3px 3px 0px; 
    cursor:pointer;/*鼠標(biāo)移動上去出現(xiàn)小手*/
}

/*設(shè)置第一個li默認顯示的顏色*/
.list-left ul .list_cutLi{
    background:#6B0904;
}

.list-right{
    width:336px;
    float:right;
}
.list-right-t{
    width:333px;
}
.left-btn{
    padding:0px 0px 0px 5px;
    width:23px;
    height:21px;
    float:left;
    margin-top:145px;
    cursor:pointer;
    display:block;
    background:url(../image/bd_lbtn.jpg) no-repeat;
}
.right-btn{
    padding:0px 0px 0px 5px;
    width:23px;
    height:21px;
    float:right;
    margin-top:145px;
    cursor:pointer;
    display:block;
    background:url(../image/bd_rbtn.jpg) no-repeat;
}
.left-btn:hover{
    background:url(../image/hbd_lbtn.jpg) no-repeat;
}
.right-btn:hover{
    background:url(../image/hbd_rbtn.jpg) no-repeat;
}
.right-box{
    float:left;
    width:268px;
    height:333px;
    overflow:hidden;
    position:relative;/*right-main的absolute的父級*/
}
.right-box-main{
    width:3216px;/*12張圖片的寬度*/
    height:333px;
    position:absolute;
    top:10px;
    left:0;
}
.right-box-main ul li{
    height:333px;
    width:268px;
    float:left;
    font-family:"溫軟雅黑";
}

.right-box-main img{
    width:268px;
    height:173px;
}
.bc_chgTitle{
    height:54px;
    width:268px;
    text-align:center;
    line-height:54px;
    font: bold 16px/54px "微軟雅黑";
}
.right-box-main ul li p{
    font-size:14px;
    width:268px;
    line-height:25px;
    padding-top:15px;
}

js/demo.js

$(function () {
    //1.自動輪播 定時器 setInterval(函數(shù)名，時間)

    /**
        autoPlay方法，實現(xiàn)自己動：
        開始的時候，設(shè)置第一張圖片的索引默認為 0，動一下索引 + 1 ，
        如果動到最后一張的時候在動就默認在為 0 (索引大于索引最大值時默認回到最小)
    */
    var curItem = 0;/*索引*/
    var len = $(".list-left ul li").length;  //索引的長度  12
    function autoPlay() {
        curItem++;
        if (curItem > len-1) {
            curItem = 0;
        };
        /**
        eq獲取索引，從第一個開始
        siblings獲取同輩元素
        */
        showCur();
    };
    setInterval(autoPlay, 3000);

    //2.左側(cè)點擊模塊，右側(cè)跳轉(zhuǎn)到相應(yīng)的圖片
    /**
        獲取當(dāng)前點擊的圖片的索引
        index()->搜索與參數(shù)表示的對象匹配的元素，并返回相應(yīng)元素的索引值。

    */
    $(".list-left ul li").click(function () {
        curItem = $(this).index();
        showCur();
    });
    //3.右側(cè)點擊圖片，左側(cè)跳轉(zhuǎn)到相應(yīng)的模塊
    //左按鈕
    $(".list-right .left-btn").click(function () {
        curItem--;
        if (curItem < 0) {
            curItem = len - 1;
        }
        showCur();
    });
    //右按鈕
    $(".list-right .right-btn").click(function () {
        curItem++;
        if (curItem > len - 1) {
            curItem = 0;
        }
        showCur();
    });
    //公共方法
    function showCur() {
        //移動到當(dāng)前的塊上，加上list_cutL索引，同級的去掉list_cutLi索引
        $(".list-left ul li").eq(curItem).addClass("list_cutLi").siblings("li").removeClass("list_cutLi");
        //一張圖片寬268，*索引就是移動的寬度
        var leftVal = 268 * curItem;
        //$(".right-box-main").css('left', -leftVal);
        //0.5秒內(nèi)向左移動圖片
        $(".right-box-main").animate({ left: -leftVal }, 500);
    };
})

jquery實現(xiàn)多模塊切換輪播
jquery實現(xiàn)多模塊切換輪播
jquery實現(xiàn)多模塊切換輪播
jquery實現(xiàn)多模塊切換輪播
jquery實現(xiàn)多模塊切換輪播
jquery實現(xiàn)多模塊切換輪播jquery實現(xiàn)多模塊切換輪播jquery實現(xiàn)多模塊切換輪播jquery實現(xiàn)多模塊切換輪播jquery實現(xiàn)多模塊切換輪播jquery實現(xiàn)多模塊切換輪播jquery實現(xiàn)多模塊切換輪播

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手