被公侵犯的漂亮人妻中字葵司,国产区图片区小说区亚洲区

技術(shù)頻道 - js技術(shù)

CSS+js實現(xiàn)圖片淡入淡出幻燈片輪播效果

作者:admin 時間:2022-3-14 14:47:39 瀏覽:

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

CSS+js實現(xiàn)圖片淡入淡出幻燈片輪播效果

demo download

功能介紹

自動切換輪播效果
鼠標(biāo)移上輪播停止
鼠標(biāo)移開輪播繼續(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標(biāo)簽是輪播區(qū)域盒子，在CSS中定義其位置、高度、寬度等樣式。

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

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

5個a標(biāo)簽，是輪播底部的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。

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);
    })
    //  鼠標(biāo)移入移開
document.querySelector("div").addEventListener("mouseover", () => {
    clearInterval(timer);
})
document.querySelector("div").addEventListener("mouseout", () => {
    AddTimer(num);
})