卡卡網(wǎng)

本文介紹一個CSS+js實現(xiàn)的圖片淡入淡出輪播效果的幻燈片實例，可點擊或自動輪播。

demodownload

功能介紹

• 自動切換輪播效果
• 鼠標移上輪播停止
• 鼠標移開輪播繼續(xù)
• 可向左或向右切換
• 可點擊小橫條切換

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="left"> < </span>
    <span class="right"> > </span>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
</div>

div標簽是輪播區(qū)域盒子，在CSS中定義其位置、高度、寬度等樣式。

ul li列表標簽是輪播的圖片。

兩個span標簽是向左和向右的箭頭，其作用是當鼠標點擊它可向左或向右切換圖片。

5個a標簽，是輪播底部的5個小橫條。點擊小橫條可切換圖片。

CSS

div {
    margin: 100 px auto;
    width: 500 px;
    height: 300 px;
    position: relative;
}
ul {
    position: relative;
}
li {
    list - style: none;
    position: absolute;
    opacity: 0;
    transition - duration: 3 s;
}
li: first - child {
    opacity: 1;
}
img {
    width: 500 px;
    height: 300 px;
}
div: hover span {
    display: block;
}
span {
    position: absolute;
    font - size: 50 px;
    cursor: pointer;
    display: none;
    background - color: grey;
    border - radius: 50 % ;
    opacity: 0.5;
}
span: first - of - type {
    left: 20 px;
    top: 110 px;
}
span: last - of - type {
    right: 20 px;
    top: 110 px;
}
a {
    position: absolute;
    width: 50 px;
    height: 5 px;
    background - color: grey;
    cursor: pointer;
}
a: first - of - type {
    bottom: 10 px;
    left: 100 px;
    background - color: red;
}
a: nth - of - type(2) {
    bottom: 10 px;
    left: 160 px;
}
a: nth - of - type(3) {
    bottom: 10 px;
    left: 220 px;
}
a: nth - of - type(4) {
    bottom: 10 px;
    left: 280 px;
}
a: nth - of - type(5) {
    bottom: 10 px;
    left: 340 px;
}

div是輪播區(qū)域盒子，CSS定義其位置、高度、寬度等樣式。

li是定義輪播圖片的列表樣式。

span定義向左向右箭頭的樣式。

a定義底部小橫條的樣式。

a:nth-of-type(n) n值為2-4，是定義5張圖片的位置。如果你的輪播圖片多于5張，可以參考實例加多n個a:nth-of-type(n)，需要注意的是left屬性值的遞增數(shù)值是60。

JS

let num = 0;
let timer;

function AddTimer(num) {
    timer = setInterval(() => {
        ChangePic(num);
        num++;
        if(num == 5) {
            num = 0;
        }
    }, 3000);
}

function ChangePic(num) {
    for(let i of document.querySelectorAll("li")) {
        i.style.opacity = "0";
    }
    toRed(num);
    document.querySelectorAll("li")[num].style.opacity = "1";
}

function toRed(num) {
    for(let i of document.querySelectorAll("a")) {
        i.style.backgroundColor = "grey";
    }
    document.querySelectorAll("a")[num].style.backgroundColor = "red";
}
AddTimer(num);
// 小圓點
for(let i = 0; i < document.querySelectorAll("a").length; i++) {
    console.log(i);
    document.querySelectorAll("a")[i].addEventListener("click", () => {
        num = i;
        ChangePic(num);
    })
}
// 左
document.querySelector(".left").addEventListener("click", () => {
        num--;
        if(num == -1) {
            num = 4;
        }
        console.log(num);
        ChangePic(num);
    })
    // 右
document.querySelector(".right").addEventListener("click", function() {
        num++;
        if(num == 5) {
            num = 0;
        }
        console.log(num);
        ChangePic(num);
    })
    //  鼠標移入移開
document.querySelector("div").addEventListener("mouseover", () => {
    clearInterval(timer);
})
document.querySelector("div").addEventListener("mouseout", () => {
    AddTimer(num);
})

AddTimer(num)是一個計時器，可以設定圖片輪播間隔時間，實例里的輪播間隔時間是3s。

ChangePic(num)是切換圖片函數(shù)，先把所有圖片透明度設為0，再把當前輪播的圖片透明度設為1。

toRed(num)是小橫條顏色設置函數(shù)，先把所有小橫條顏色設為grey，再把當前輪播的圖片小橫條顏色設為red。

總結(jié)

本文介紹了一個CSS+js實現(xiàn)的圖片淡入淡出輪播效果的幻燈片實例，實例代碼清晰易懂易修改，在很多網(wǎng)站都有使用。

您可能對以下文章也感興趣

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

標簽: 幻燈片  圖片輪播