jQuery怎么實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果

發(fā)布時(shí)間：2021-09-13 15:27:17 來(lái)源：億速云閱讀：800 作者：chen 欄目：開(kāi)發(fā)技術(shù)

本篇內(nèi)容主要講解“jQuery怎么實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“jQuery怎么實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果”吧!

首先我們看到，它是由背景圖片、方向圖標(biāo)和指示器組成。我們發(fā)現(xiàn)背景圖片、方向圖標(biāo)和指示器是層疊在一起的，所以布局時(shí)我們要用絕對(duì)定位。我們要實(shí)現(xiàn)點(diǎn)擊方向圖標(biāo)時(shí)，圖片跟著變換；點(diǎn)擊指示器時(shí)，圖片跟著變換；不點(diǎn)擊時(shí)每隔5秒自動(dòng)播放；不點(diǎn)擊時(shí)不顯示方向圖標(biāo)。

結(jié)構(gòu)布局：用一個(gè)div包裹3個(gè)div，里面的3個(gè)div分別顯示背景圖片部分、方向圖標(biāo)部分和指示器部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/lunbotu.css" rel="external nofollow" >
</head>
<body>
<!--整個(gè)輪播圖部分-->
<div class="carousel">
    <!--圖片背景-->
    <div class="content">
        <ul>
            <li><a href=""><img src=" ./img/dj.jpg" ></a></li>
            <li><a href=""><img src=" ./img/ali.jpg" ></a></li>
            <li><a href=""><img src=" ./img/al.jpg" ></a></li>
            <li><a href=""><img src=" ./img/hml.jpg" ></a></li>
            <li><a href=""><img src=" ./img/yao.jpg" ></a></li>
            <li><a href=""><img src=" ./img/xia.jpg" ></a></li>
        </ul>
    </div>
    <!--左移、右移圖標(biāo)-->
    <div class="pos">
        <a href="" class=" left"><img src="./img/arrow-left.png" ></a>
        <a href="" class=" right"><img src="./img/arrow-right.png" ></a>
    </div>
    <!--指示器-->
    <div class="dot">
        <ul>
            <li class="active"><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </div>
</div>
<script src="js/jquery-3.6.0.js"></script>
<script src="js/lunbotu.js"></script>
</body>
</html>

樣式代碼：大家可以自己設(shè)計(jì)自己喜歡的顏色和樣式。注意要用絕對(duì)定位就要遵循子絕父相的原則。想讓界面只顯示一張圖片可以用overflow: hidden;把超出部分隱藏，在用定位后可以設(shè)置top: 50%;transform: translateY(-50%);垂直居中 display: none;

/*去除標(biāo)簽自帶的樣式*/
* {
    margin: 0;
    padding: 0;
}
 
ul {
    list-style: none;
}
 
a {
    text-decoration: none;
}
 
img {
    width: 100%;
}
/*設(shè)置整個(gè)輪播圖的布局*/
.carousel {
    position: relative;
    margin: 40px auto;
    width: 1000px;
    height: 460px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    /*超出部分隱藏*/
    overflow: hidden;
}
/*設(shè)置背景圖片的布局*/
.content {
    position: absolute;
    z-index: 1;
}
/*設(shè)置左移、右移圖標(biāo)和指示器的布局*/
.pos,
.dot {
    position: absolute;
    z-index: 2;
    width: 100%;
}
/*設(shè)置左移、右移圖標(biāo)先垂直居中、不顯示*/
.pos {
    top: 50%;
    transform: translateY(-50%);
    display: none;
}
/*設(shè)置左移、右移圖標(biāo)的背景*/
.pos > a {
    padding: 10px 0;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.5);
}
/*設(shè)置左移圖標(biāo)的位置*/
.left {
    float: left;
}
/*設(shè)置右移圖標(biāo)的位置*/
.right {
    float: right;
}
/*設(shè)置指示器顯示的位置*/
.dot {
    bottom: 30px;
    text-align: center;
}
/*設(shè)置指示器的背景*/
.dot ul {
    display: inline-block;
    padding: 2px;
    background: rgba(0, 0, 0, .2);
    border-radius: 15px;
 
}
/*設(shè)置圓點(diǎn)的大小*/
.dot > ul > li {
    float: left;
    margin: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
}
/*設(shè)置顯示當(dāng)前圖片時(shí)指示器指示的位置*/
.active {
    background: rgba(255, 255, 255, .6) !important;
}

JavaScript代碼：注意開(kāi)始先把圖片隱藏，默認(rèn)顯示第一張圖，不然不管你最先點(diǎn)擊什么圖片，它都是第二張圖。顯示下一張圖片時(shí)，上一張圖片和指示器的標(biāo)記要清除

$(function () {
    /*保存當(dāng)前圖片的索引*/
    let index = 0;
    let btn = false;
    /*去除a標(biāo)簽自帶的刷新*/
    $('a[href=""]').prop('href', 'javascript:;');
    /*開(kāi)始先把圖片隱藏，默認(rèn)顯示第一張圖*/
    $('.content>ul>li').hide();
    $('.content>ul>li:eq(0)').show();
    // 設(shè)置方向箭頭圖標(biāo)的淡入、淡出
    $('.carousel').hover(function () {
        $('.pos').stop().fadeIn()
    }, function () {
        $('.pos').stop().fadeOut()
    })
    // 為左方向圖標(biāo)綁定點(diǎn)擊事件
    $('.left').on('click', function () {
        btn = true;
        clean();
        if (index == 0) {
            index = 5;
        } else {
            --index;
        }
        show();
    })
    // 為右方向圖標(biāo)綁定點(diǎn)擊事件
    $('.right').on('click', function () {
        btn = true;
        clean();
        if (index == 5) {
            index = 0;
        } else {
            ++index;
        }
        show();
    })
    //指示器指示功能（為指示器綁定點(diǎn)擊事件）
    $('.dot li').on('click', function () {
        btn = true;
        let now = $(this).index()
        if (now != index) {
            clean();
            index = now;
            show();
        }
    })
    //自動(dòng)播放功能（定時(shí)器）
    setInterval(function () {
        if (!btn) {
            clean();
            if (index == 5) {
                index = 0;
            } else {
                ++index;
            }
            show();
        } else {
            btn = false;
        }

    }, 5000)

    //清除上一張圖片和指示器上的指示
    function clean() {
        $(`.content>ul>li:eq(${index})`).stop().fadeOut();
        $(`.dot>ul>li:eq(${index})`).removeClass('active');
    }
    //添加新的圖片和指示器上的指示
    function show() {
        console.log(index);
        $(`.content>ul>li:eq(${index})`).stop().fadeIn();
        console.log($(`.content>ul>li:eq(${index})`))
        $(`.dot>ul>li:eq(${index})`).addClass('active');

    }
})

結(jié)果：

jQuery怎么實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果

到此，相信大家對(duì)“jQuery怎么實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

jQuery怎么實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽