jq实现根据时间展示特定图片的3D轮播图

最新推荐文章于 2022-04-21 23:08:39 发布

Tyler_YC

最新推荐文章于 2022-04-21 23:08:39 发布

阅读量207

点赞数

分类专栏：前端文章标签： javascript jquery css html5

本文链接：https://blog.csdn.net/Tyler_YC/article/details/111314990

版权

该博客介绍了如何利用jQuery配合HTML和CSS创建一个3D轮播图，该轮播图能够根据特定时间显示不同的图片，为用户提供动态的视觉体验。

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

jq实现根据时间展示特定图片的3D轮播图

html

在这里插入代码片
```<body class="up_z">
	<div class="banner_box">
		<div class="box">
			<div class="carousel">
			</div>
		</div>
		<button class="left_btn" onclick="left()"></button>
		<button class="right_btn" onclick="right()"></button>
	</div>
</body>

<script>
	var imgList = [
		{ img: './img/0.png', id: 0 },
		{ img: './img/1.png', id: 1 },
		{ img: './img/2.png', id: 2 },
		{ img: './img/3.png', id: 3 },
		{ img: './img/4.png', id: 4 },
		{ img: './img/5.png', id: 5 },
		{ img: './img/6.png', id: 6 }
	]
	var imgNub;               //轮播图片数量
	var d = new Date()


	$(function () {
		let week = (d.getDay() - 1)    //获取系统日期周几
		imgNub = $(".list li").size();
		for (i = 0; i < imgNub; i++) {
			if (i === week) {
				$(".list li:eq(" + i + ")").addClass("list_1");
			}
			else {
				$(".list li:eq(" + i + ")").addClass("list_2");
			}
		}
		if (week === 0) {
			$(".list>li:eq(0)").addClass("list_2");
			$(".list>li:eq(5)").addClass("

最低0.47元/天解锁文章

Tyler_YC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq实现根据时间展示特定图片的3D轮播图

3D轮播图根据周几加载3D轮播图html在这里插入代码片```<body class="up_z"> <div class="banner_box"> <div class="box"> <div class="carousel"> </div> </div> <button class="left_btn" onclick="left()"></button> <bu
复制链接

扫一扫