卡卡網(wǎng)

在上一文中，我們介紹了《圖片淡入淡出幻燈片輪播效果》，今天改變一下輪播效果，把淡入淡出改為左右滑動(dòng)。

demodownload

功能介紹

• 自動(dòng)切換輪播效果
• 鼠標(biāo)移上去就會(huì)停下來(lái)
• 鼠標(biāo)移開就會(huì)繼續(xù)切換
• 向左向右切換
• 點(diǎn)擊小圓點(diǎn)切換

HTML

<div>
    <ul>
        <li><img src="1.jpg" alt=""></li>
        <li><img src="2.jpg" alt=""></li>
        <li><img src="3.jpg" alt=""></li>
        <li><img src="4.jpg" alt=""></li>
        <li><img src="5.jpg" alt=""></li>
    </ul>
    <span class="direction" id="left"> < </span>
    <span class="direction" id="right"> > </span>
    <div class="dots">
        <span id="active" class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
    </div>
</div>

外層DIV標(biāo)簽，是幻燈片盒子區(qū)域，內(nèi)層的DIV標(biāo)簽，是幻燈片底部的小圓點(diǎn)區(qū)域。

ul li列表標(biāo)簽，是輪播圖片。

兩個(gè)span標(biāo)簽，是向左向右箭頭。

CSS

/* 清空邊距 */
* {
    margin: 0;
    padding: 0;
}
/* 輪播圖樣式 */
img {
    width: 500px;
    height: 300px;
}

li {
    list-style: none;
    float: left;
}

ul {
    width: 2500px;
    position: absolute;
    top: 0px;
    /* 設(shè)置右邊的距離即可 */
    left: 0px;
    /* 如果不想要輪播效果可以把下面這行代碼注釋掉 */;

    transition-duration: 1s;
}

div {
    width: 500px;
    height: 300px;
    overflow: hidden;
    position: relative;
    top: 100px;
    left: 400px;
}
/* 左右兩側(cè)樣式 */
div:hover .direction {
    display: block;
    background-color: grey;
}

.direction {
    position: absolute;
    font-size: 50px;
    cursor: pointer;
    display: none;
    border-radius: 50%;
    opacity: 0.5;
}

#left {
    top: 110px;
    left: 30px;
}

#right {
    top: 110px;
    right: 30px;
}
/* 下面五個(gè)點(diǎn) */
.dot {
    width: 20px;
    height: 20px;
    border-radius:10px;

    background-color: grey;
    display: inline-block;
    margin-left: 30px;
    cursor: pointer;
}

#active {
    background-color: red;
}

.dots {

    width: 300px;
    height: 20px;
    position: absolute;
    left: 100px;
    margin-top: 170px;
}

ul樣式屬性中，使用了transition-duration，該屬性以秒或毫秒為單位指定過(guò)渡動(dòng)畫所需的時(shí)間，默認(rèn)值為 0s，表示不出現(xiàn)過(guò)渡動(dòng)畫。

div:hover .direction{}定義鼠標(biāo)移上后左右兩方向箭頭的樣式。

.dot{}定義幻燈片底部5個(gè)點(diǎn)的樣式。.dots{}定義幻燈片底部5個(gè)小圓點(diǎn)的位置。

如果想把小圓點(diǎn)改為小橫條，則只需把.dot{}里的border-radius:10px;刪除，同時(shí)把.dots{}里的height: 20px;改為height: 10px;即可，如果不修改，小橫條是個(gè)正方形。

JS

let pos = 0;
let timer;
let num;
// 對(duì)應(yīng)小紅點(diǎn)亮函數(shù)
function toRed()
{
    let dots = document.querySelectorAll(".dot");
    for (let i = 0; i < dots.length; i++)
    {
        dots[i].id = "";
    }
    num = -pos / 500;
    dots[num].id = "active";
}

function setTimer()
{
    timer = setInterval(() =>
    {
        document.querySelector("ul").style.left = pos + "px";
        // 對(duì)應(yīng)點(diǎn)亮起來(lái)
        toRed();
        // 遞減
        pos -= 500;
        if (pos == -2500)
        {
            pos = 0;
        }
    }, 2000)
}
setTimer();
// 移入停下，移開運(yùn)行
document.querySelector("div").addEventListener("mouseover", () =>
{
    clearInterval(timer);
})
document.querySelector("div").addEventListener("mouseout", () =>
    {
        setTimer();
    })
    // 左右兩邊
document.querySelector("#left").addEventListener("click", () =>
{
    pos += 500;
    if (pos == 500)
    {
        pos = -2000;
    }
    document.querySelector("ul").style.left = pos + "px";
    toRed();
})
document.querySelector("#right").addEventListener("click", () =>
    {
        pos -= 500;
        if (pos == -2500)
        {
            pos = 0;
        }
        document.querySelector("ul").style.left = pos + "px";
        toRed();
    })
    // 點(diǎn)擊小圓點(diǎn)對(duì)應(yīng)亮色
let dots = document.querySelectorAll(".dot");
for (let i = 0; i < dots.length; i++)
{
    (function(i)
    {
        dots[i].addEventListener("click", () =>
        {
            num = i;
            pos = -num * 500;
            document.querySelector("ul").style.left = pos + "px";
            toRed();
        })
    })(i)
}

toRed()是小紅點(diǎn)高亮函數(shù)，把當(dāng)前圖片對(duì)應(yīng)的小紅點(diǎn)的id值設(shè)為active，其余小紅點(diǎn)id值設(shè)為空。

setTimer()是計(jì)時(shí)器，設(shè)置圖片輪播間隔時(shí)間。

程序?qū)懥撕芏?code>addEventListener監(jiān)聽函數(shù)，mouseover是鼠標(biāo)以上，mouseout是鼠標(biāo)移開，click是鼠標(biāo)點(diǎn)擊。

總結(jié)

本文介紹了圖片左右滑動(dòng)幻燈片輪播效果，使用了CSS+JS來(lái)實(shí)現(xiàn)，代碼量少，清晰易懂，修改簡(jiǎn)單，如果你也喜歡這個(gè)輪播效果，那么下載本文實(shí)例稍作修改即可使用。

您可能對(duì)以下文章也感興趣

• CSS+js實(shí)現(xiàn)圖片淡入淡出幻燈片輪播效果
• jQuery創(chuàng)建滑動(dòng)幻燈片
• jQuery+CSS3實(shí)現(xiàn)圖片自動(dòng)輪換淡入淡出效果
• 百葉窗過(guò)渡的幻燈片/輪播動(dòng)畫【效果演示/源碼下載】
• 如何將 Bootstrap 4 Carousel 更改為淡入淡出過(guò)渡而不是滑動(dòng)
• 【實(shí)例】淡入淡出幻燈片/自動(dòng)輪播動(dòng)畫效果
• 純CSS實(shí)現(xiàn)的左右滑動(dòng)幻燈片
• 純CSS實(shí)現(xiàn)的幻燈片/輪播效果【高級(jí)動(dòng)畫】
• 【實(shí)例】使用 HTML、CSS 和 JavaScript 創(chuàng)建幻燈片

標(biāo)簽: 滑動(dòng)幻燈片  幻燈片  圖片輪播