前端小技巧之轮播图

文章目录

功能
html
css
javaScript
图片

设置了一点小难度，不理解的话，是不能套用的哦！！！
（下方的圆圈与图片数量不统一，而且宽度是固定的）

下次写一些直接套用的，不整这些麻烦的了

功能

轮播
鼠标移入图片后会停止
鼠标移出图片后会继续进行轮播
左右两个按钮，可左右滑动
增加节流锁（防止快速点击左右按钮）
下方圆圈可快速进入目标图片

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="style.css">
    <script src="js.js" defer></script>
</head>
<body> 
    <div id="main">
        <ul>
            <li><img src="img/img12.jpeg" alt="亥猪"></li>
            <li><img src="img/img1.jpeg" alt="子鼠"></li>
            <li><img src="img/img2.jpeg" alt="丑牛"></li>
            <li><img src="img/img3.jpeg" alt="寅虎"></li>
            <li><img src="img/img4.jpeg" alt="卯兔"></li>
            <li><img src="img/img5.jpeg" alt="辰龙"></li>
            <li><img src="img/img6.jpeg" alt="巳蛇"></li>
            <li><img src="img/img7.jpeg" alt="午马"></li>
            <li><img src="img/img8.jpeg" alt="未羊"></li>
            <li><img src="img/img9.jpeg" alt="申猴"></li>
            <li><img src="img/img10.jpeg" alt="酉鸡"></li>
            <li><img src="img/img11.jpeg" alt="戌狗"></li>
            <li><img src="img/img12.jpeg" alt="亥猪"></li>
            <li><img src="img/img1.jpeg" alt="子鼠"></li>
        </ul>
        <input type="button" id="left" value="<">
        <input type="button" id="right" value=">">
        <!-- 加一个列表 -->
        <ul id = "selectLi">
            <li class="circle bgc" data-n="1"></li>
            <li class="circle" data-n="4"></li>
            <li class="circle" data-n="7"></li>
            <li class="circle" data-n="10"></li>
        </ul>
    </div>
</body>
</html>

css

* {
    margin: 0;
    padding: 0;
}
#main {
    margin: auto;
    margin-top: 100px;
    width: 250px;
    height: 540px;
    background-color: aquamarine;
    overflow: hidden;
    position: relative;
}
div ul {
    position: absolute;
    top: 0px;
    left: -250px;
    width: 3500px;
    transition: 0s ease-in-out;
}
li {
    float: left;
    list-style: none;
}
div ul li img {
    width: 250px;
}
#main #left{
    width: 20px;
    height: 40px;
    z-index: 99;
    position: absolute;
    top: 300px;
    left: 0px;
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
    line-height: 30px;
    border: none;
}
#main #right{
    width: 20px;
    height: 40px;
    z-index: 99;
    float: right;
    position: absolute;
    top: 300px;
    right: 0px;
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
    line-height: 30px;
    border: none;
}
#main #selectLi {
    list-style: none;
    position: absolute;
    top: 450px;
    left: 50%;
    width: 160px;
    display: flex;
    justify-content: space-around;
    height: 20px;
    transform: translate(-50%, 0);
    z-index: 99;
}
#main #selectLi li{
    border-radius: 50%;
    height: 30px;
    width: 30px;
    text-align: center;
    cursor: pointer;
}
#main #selectLi .circle{
    background-color: rgba(255, 255, 255, 0.9);
}
#main #selectLi .bgc{
    background-color: #e74c3c;
    opacity: 0.9;
}

javaScript

let leftBtn = document.getElementById("left");
let rightBtn = document.getElementById("right");
let imgList = document.getElementsByTagName('ul')[0];
// 获取主元素
let main = document.getElementById("main");
main.style.height = imgList.style.height;

// 图片索引
let index = 1;
rightBtn.addEventListener("click", ()=>{
    if(!lock) return;
    index ++;
    imgList.style.left = index * (-250) + "px";
    // 增加过渡
    imgList.style.transition = "0.5s ease-in-out";
    if(index == 13){
        index = 1;
        setTimeout(() =>{
            imgList.style.left = "-250px";
            // 取消过渡
            imgList.style.transition = "none";
        }, 500)
    }
    setCircles();
    // 关锁
    lock = false;
    setTimeout(()=>{
        lock = true;
    }, 500)
})
leftBtn.addEventListener("click", ()=>{
    if(!lock) return;
    index --;
    imgList.style.left = index * (-250) + "px";
    // 增加过渡
    imgList.style.transition = "0.5s ease-in-out";
    if(index == 0){
        index = 12;
        setTimeout(() =>{
            imgList.style.left = "-3000px";
            // 取消过渡
            imgList.style.transition = "none";
        }, 500)
    }
    setCircles();
    // 关锁
    lock = false;
    setTimeout(()=>{
        lock = true;
    }, 500)
})
// 获取小圆点
const circles = document.querySelectorAll(".circle");
// 高亮设置
function setCircles(){
    for(let i = 0; i < circles.length; i++){
        if(i === parseInt((index - 1) / 3)){
            circles[i].classList.add("bgc");
        }else{
            circles[i].classList.remove("bgc");
        }
    }
    // circles.forEach((item, index) => {  // 目标和索引

    // });
}
// 点击切换图片
const oCircle = document.getElementById("selectLi");
oCircle.addEventListener("click", (e)=>{
    if(e.target.nodeName.toLowerCase() === "li"){
        // 对应的值
        const n = Number(e.target.getAttribute("data-n"));
        index = n;
        imgList.style.left = index * (-250) + "px";
        imgList.style.transition = "0.5s ease-in-out";
        setCircles();
    }
})
// 函数优化
// 设置节流锁
let lock = true;
// 自动轮播
function handleRightBtn(){
    if(!lock) return;
    index ++;
    imgList.style.left = index * (-250) + "px";
    // 增加过渡
    imgList.style.transition = "0.5s ease-in-out";
    if(index == 13){
        index = 1;
        setTimeout(() =>{
            imgList.style.left = "-250px";
            // 取消过渡
            imgList.style.transition = "none";
        }, 500)
    }
    setCircles();
    // 关锁
    lock = false;
    setTimeout(()=>{
        lock = true;
    }, 500)
}
let autoPlay = setInterval(handleRightBtn, 1000);
main.onmouseenter = function(){
    clearInterval(autoPlay);
}
main.onmouseleave = function(){
    clearInterval(autoPlay);
    autoPlay = setInterval(handleRightBtn, 1000);
}