JavaScript用构造函数写轮播图

最新推荐文章于 2024-08-04 16:33:59 发布

顾洛笙

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量93

点赞数

分类专栏： JavaScript 文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_56491274/article/details/129356349

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

html结构：

<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>
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="swiper" id="swiper1">
        <img src="./img/关闭.png" onclick="del()" class="del" alt="">
        <div class="swiper-wrapper" id="swiper222">

        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

    </div>
    <div id="ga">

    </div>
    <script src="./swiper/swiper-bundle.min.js"></script>
    <script src="./index.js"></script>

</body>

</html>

css样式：

	* {
	    margin: 0;
	    padding: 0;
	}
	
	#ga {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: center;
	    background-color: white;
	}
	
	#ab {
	    color: white;
	    width: 300px;
	    height: 270px;
	    display: flex;
	    flex-direction: column;
	    justify-content: flex-start;
	    background-color: skyblue;
	    margin: 10px 20px;
	    cursor: pointer;
	}
	
	#ti {
	    background-color: black;
	    height: 30px;
	    width: 280px;
	    line-height: 30px;
	    text-align: center;
	    transition: all 0.5s;
	    position: absolute;
	    top: 0;
	    opacity: 0;
	}
	
	#tu {
	    height: 200px;
	    position: relative;
	    padding: 10px 10px;
	}
	
	#tu>img {
	    height: 200px;
	    width: 280px;
	    transition: all 0.5s;
	}
	
	#te {
	    height: 30px;
	    border-bottom: 1px solid rgb(213, 210, 210);
	    font-size: 10px;
	    margin-left: 10px;
	    margin-right: 10px;
	}
	
	#tim {
	    height: 30px;
	    padding-left: 10px;
	}
	
	#ab:hover #ti {
	    top: 10px;
	    opacity: 1;
	}
	
	#ab:hover #tu>img {
	    transform: scaleY(1);
	    opacity: 0.8;
	}
	
	.swiper {
	    display: none;
	    margin: auto;
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    width: 1000px;
	    height: 600px;
	}
	
	#img1 {
	    width: 1000px;
	    height: 600px;
	}
	
	.del {
	    position: absolute;
	    right: 10px;
	    top: 10px;
	    width: 60px;
	    height: 60px;
	    z-index: 100;
	    cursor: pointer;
	}

js
//图片的构造函数
function aaa(title, tupian, text, date, arrList, id) {
this.title = title;
this.tupian = tupian;
this.text = text;
this.date = date;
this.arrList = arrList;
this.id = id
this.cu = function() {
let html = <div id="ab"> <div id="tu" onclick='lunbo(${this.id})'> <img src="${this.tupian}" alt=""><div id="ti" >${this.title} </div> </div> <div id="te" >${this.text}</div> <div id="tim" >${this.date}</div> </div> ;
document.getElementById(“ga”).innerHTML += html;
};

}

//数据
let arr = [{
        title: "标题",
        tupian: "./img/翻页动画书小人书趣味连环画 手翻书互动.jpg",
        text: "翻页动画书小人书趣味连环画 手翻书互动",
        date: "2012-05-01",
        arrList: [
            "./img/2.jpg",
            "./img/3.jpg",
        ],
        id: 1,
    },
    {
        title: "标题",
        tupian: "./img/萌“动”冬日.gif",
        text: "萌“动”冬日",
        date: "2012-05-01",
        arrList: [
            "./img/5.jpg",
            "./img/6.jpg",
            "./img/7.jpg",
        ],
        id: 2,
    },
    {
        title: "标题",
        tupian: "./img/内外2021广告片：微而足道，无分你我.png",
        text: "内外2021广告片：微而足道，无分你我",
        date: "2012-05-21",
        arrList: [
            "./img/9.jpg",
            "./img/10.jpg",
            "./img/11.jpg",
        ],
        id: 3,
    },
    {
        title: "标题",
        tupian: "./img/剑客.jpg",
        text: "剑客",
        date: "2012-05-01",
        arrList: [
            "./img/13.jpg",
            "./img/14.jpg",
            "./img/15.jpg",
        ],
        id: 4,
    },
    {
        title: "标题",
        tupian: "./img/小犀牛的名字.jpg",
        text: "小犀牛的名字",
        date: "2012-05-15",
        arrList: [
            "./img/17.jpg",
            "./img/7.jpg",
            "./img/15.jpg",
        ],
        id: 5,
    },
    {
        title: "标题",
        tupian: "./img/病痛挑战公益基金会：罕见的拥抱.jpg",
        text: "病痛挑战公益基金会：罕见的拥抱",
        date: "2012-05-21",
        arrList: [
            "./img/19.jpg",
            "./img/2.jpg",
            "./img/7.jpg",
        ],
        id: 6,
    },
    {
        title: "标题",
        tupian: "./img/虎书法字.png",
        text: "虎书法字",
        date: "2012-05-12",
        arrList: [
            "./img/21.jpg",
            "./img/1.jpg",
            "./img/11.jpg",
        ],
        id: 7,
    },
    {
        title: "标题",
        tupian: "./img/雪佛兰×张小斐《你好，沃兰多》：5_2大空间，太能装了.jpg",
        text: "雪佛兰×张小斐《你好，沃兰多》：5_2大空间，太能装了",
        date: "2012-05-11",
        arrList: [
            "./img/12.jpg",
            "./img/2.jpg",
            "./img/14.jpg",
        ],
        id: 8,
    },


];

//循环数据
for (let i = 0; i < arr.length; i++) {
    let a = new aaa(
        arr[i].title,
        arr[i].tupian,
        arr[i].text,
        arr[i].date,
        arr[i].arrList,
        arr[i].id
    );
    a.cu();
}

//轮播图片
function lunbo(thisa) {
    for (let i = 0; i < arr.length; i++) {
        if (arr[i].id == thisa) {
            for (let j = 0; j < arr[i].arrList.length; j++) {
                let h = `<div class="swiper-slide"><img id='img1' src="${arr[i].arrList[j]}" alt=""></div>`;
                document.getElementById("swiper222").innerHTML += h;
            }
        }
    }
    document.getElementById("swiper1").style.display = "block";
    mySwiper = new Swiper(".swiper", {
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        pagination: {
            el: '.swiper-pagination',
        },
    });
}

//swiper引用
var mySwiper = new Swiper(".swiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        el: '.swiper-pagination',
    },
});

//删除功能
function del() {
    document.getElementById("swiper222").innerHTML = '';
    document.getElementById("swiper1").style.display = "none";
}