嵌套轮播图哈

努力的程序员30*15k

于 2022-03-21 23:12:14 发布

阅读量133

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45712583/article/details/123649071

版权

这是一个使用HTML、CSS和JavaScript实现的滑动轮播图，包含日期和标题显示，左右箭头控制及小圆点指示当前图片位置。通过点击小圆点或箭头可以切换图片，同时具备鼠标悬停暂停、离开继续自动播放的功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .carousel {
            width: 100%;
            height: 33.3vw;
            min-width: 900px;
            min-height: 300px;
            position: relative;
            overflow: hidden;
        }

        .img-con {
            width: 200%;
            height: 100%;
            font-size: 0;
            position: absolute;
            left: 0;
        }

        .img-con img {
            width: 100%;
            height: 100%;
        }

        .dot {
            list-style: none;
            margin: 0;
            padding: 0;
            position: absolute;
            left: 50%;
            bottom: 30px;
            transform: translate(-50%, 0);

        }

        .dot>li {
            width: 20px;
            height: 20px;
            border-radius: 20px;
            border: 2px solid #FF0000;
            float: left;
            margin-left: 10px;
        }

        .dot>li:first-child {
            margin-left: 0;
        }

        .left,
        .right {
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
        }

        .left {
            left: 50px;
        }

        .right {
            right: 50px;
        }

        .title {
            position: absolute;
            top: 20px;
            left: 150px;
            font-size: 20px;
            text-shadow: 0 1px 3px rgb(0 0 0 / 90%);
            color: #fff;
        }

        .title>span {
            position: relative;
            top: 10px;

            font-size: 24px;
            overflow: hidden;
            display: inline-block;
        }

        .img-item {
            float: left;
            width: 50%;
            height: 100%;
            position: relative;
        }

        .clear::after {
            content: "";
            display: block;
            visibility: hidden;
            clear: both;
            overflow: hidden;
            height: 0;
        }
    </style>
</head> 

<body>
    <script type="module">
        import Utils from "./js/Utils.js";
        var arr = [{
                date: "22/Feb.2022",
                title: "2021旅行记忆｜一起点亮这个世界的1%",
                src: "./img/a.jpg"
            },
            {
                date: "21/Feb.2022",
                title: "我是周末种草官|天堂应是书店和图书馆的模样",
                src: "./img/b.jpg"
            },
            {
                date: "20/Feb.2022",
                title: "【欧亚行迹】土耳其回忆录",
                src: "./img/c.jpg"
            },
            {
                date: "19/Feb.2022",
                title: "我的2021年 | 心怀远方，热爱可抵岁月漫长",
                src: "./img/d.jpg"
            },
            {
                date: "18/Feb.2022",
                title: "哈尔滨 | 有一场看雪的跨年仪式感",
                src: "./img/e.jpg"
            }
        ]
        
        const LEFT=Symbol(),RIGHT=Symbol(),SPEED=100,MAX_TIME=120;
        var imgCon,prev;
        
        var list=[],
            x=0,
            time=MAX_TIME,
            bool=false,
            autoBool=false,
            direction=LEFT,
            pos=0;
        init()

        function init() {
            var carousel=Utils.ce("div",null,{className:"carousel"});
            carousel.innerHTML=`
                <div class='img-con'></div>
                ${arr.reduce((v,t)=>v+"<li></li>","<ul class='dot'>")+"</ul>"}
                <img src='./img/left.png' class='left'>
                <img src='./img/right.png' class='right'>
            `;
            imgCon=carousel.querySelector(".img-con");
            imgCon.appendChild(getImgItem(0));
            document.body.appendChild(carousel);
            carousel.addEventListener("click",clickhandler);
            carousel.addEventListener("mouseenter",mouseHandler);
            carousel.addEventListener("mouseleave",mouseHandler);
            changePrev(imgCon.nextElementSibling.children[pos]);
            animation()
        }


        function mouseHandler(e){
            // if(e.type==="mouseenter"){
            //     autoBool=false;
            // }else{
            //     autoBool=true;
            //     time=MAX_TIME;
            // }
e.type==="mouseenter" ? autoBool=false : autoBool=true,time=MAX_TIME;
        }
        //  ${arr[index].date.match(/^(\d+)(\/.*)$/).slice(1).reduce((v,t,i)=>i===0?v+`<span>${t}</span>` : v+t,"")}
        function getImgItem(index){
            if(list[index]) return list[index];
            var item=Utils.ce("div",null,{className:"img-item"});
            console.log(arr[index],index);
            item.innerHTML=`
                <div class='title'>
                <span>${arr[index].date.split("/")[0]}</span>${"/"+arr[index].date.split("/")[1]}
                <br>
                ${arr[index].title}
                </div>
                <img src='${arr[index].src}'>
            `
            list[index]=item;
            return item;
        }

        function clickhandler(e){
            if(bool) return;
            if(e.target.nodeName==="LI"){
                var index=Array.from(e.target.parentElement.children).indexOf(e.target);
                if(index===pos) return;
                direction=index>pos ? LEFT : RIGHT;
                pos=index;
            }else if(e.target.nodeName==="IMG"){
                if(e.target.className==="left"){
                    pos=pos<0 ? arr.length-1 : pos-1;
                    direction=RIGHT;
                }else if(e.target.className==="right"){
                    pos=pos>=arr.length-1 ? 0 : pos+1;
                    direction=LEFT;
                }
            }
            setNextImage();
            changePrev(imgCon.nextElementSibling.children[pos]);
        }

        function setNextImage(){
            if(direction===LEFT){
                imgCon.appendChild(getImgItem(pos));
                x=0;
            }else if(direction===RIGHT){
                imgCon.insertBefore(getImgItem(pos),imgCon.firstElementChild);
                x=-imgCon.offsetWidth/2;
            }
            bool=true;
        }

        function changePrev(elem){
            if(prev){
                prev.style.backgroundColor="rgba(255,0,0,0)";
            }
            prev=elem;
            prev.style.backgroundColor="red";
        }

        function animation(){
            requestAnimationFrame(animation);
            playMove();
            autoPlay();
        }

        function playMove(){
            if(!bool) return;
            if(direction===LEFT){
                x-=SPEED;
                if(x<=-imgCon.offsetWidth/2){
                    bool=false;
                    imgCon.firstElementChild.remove();
                    x=0;
                }
            }else if(direction===RIGHT){
                x+=SPEED;
                if(x>=0){
                    bool=false;
                    imgCon.lastElementChild.remove();
                    x=0;
                }
            }
            imgCon.style.left=x+"px";
        }

        function autoPlay(){
            if(!autoBool) return;
            time--;
            if(time>0) return;
            time=MAX_TIME;
            var evt=new MouseEvent("click",{bubbles:true});
            document.querySelector(".right").dispatchEvent(evt);
        }

    </script>
</body>

</html>

export default class Utils{
    static ce(type,style,prop,parent){
        var elem=document.createElement(type);
        if(style && typeof style==="object") Object.assign(elem.style,style);
        if(prop && typeof prop==="object") Object.assign(elem,prop);
        if(typeof parent==="string") parent=document.querySelector(parent);
        if(parent && parent instanceof HTMLElement) parent.appendChild(elem);
        return elem;
    }
}