刚刚,国家统计局发布重磅数据,1张图、5分钟、6个维度讲清楚↓↓

刚刚,国家统计局发布重磅数据,2018年中国经济春季报出炉!


投资、消费、出口数据有啥亮点?中国经济形势怎么样?


三大专家、六大维度,带你一图看懂↓↓


来源:央视财经(ID:cctvyscj)


大数据周刊

邮箱:tougao@bigdatamag.cn

电话:010-57524293


众论大数据 引领大时代

长按二维码关注


以下是一个基本的五张图片轮播,带有六个li小点跟随的JavaScript代码: HTML代码: ``` <div class="carousel-container"> <div class="carousel-slide"> <img src="img1.jpg" alt="Image 1"> <img src="img2.jpg" alt="Image 2"> <img src="img3.jpg" alt="Image 3"> <img src="img4.jpg" alt="Image 4"> <img src="img5.jpg" alt="Image 5"> </div> <ul class="carousel-dots"> <li class="dot active"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> </ul> </div> ``` CSS代码: ``` .carousel-container { position: relative; width: 100%; height: 400px; overflow: hidden; } .carousel-slide { display: flex; width: 500%; height: 100%; } .carousel-slide img { width: 20%; height: 100%; object-fit: cover; } .carousel-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; } .carousel-dots .dot { width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background-color: #ccc; cursor: pointer; transition: background-color 0.3s ease; } .carousel-dots .dot.active { background-color: #333; } ``` JavaScript代码: ``` const slide = document.querySelector('.carousel-slide'); const images = document.querySelectorAll('.carousel-slide img'); const dots = document.querySelectorAll('.dot'); // 设置初始值 let currentSlide = 1; let slideWidth = images[0].clientWidth; // 设置初始图片位置 slide.style.transform = `translateX(-${slideWidth * currentSlide}px)`; // 添加小点的点击事件 dots.forEach((dot, index) => { dot.addEventListener('click', () => { currentSlide = index + 1; updateSlide(); }); }); // 自动轮播 setInterval(() => { currentSlide++; updateSlide(); }, 5000); // 更新图片和小点的状态 function updateSlide() { // 更新图片位置 slide.style.transition = "transform 0.3s ease-in-out"; slide.style.transform = `translateX(-${slideWidth * currentSlide}px)`; // 更新小点状态 dots.forEach(dot => dot.classList.remove('active')); dots[currentSlide - 1].classList.add('active'); // 监听过渡完成事件,避免动画闪烁 slide.addEventListener('transitionend', () => { if (images[currentSlide].id === 'first') { slide.style.transition = "none"; currentSlide = 1; slide.style.transform = `translateX(-${slideWidth * currentSlide}px)`; } else if (images[currentSlide].id === 'last') { slide.style.transition = "none"; currentSlide = images.length - 2; slide.style.transform = `translateX(-${slideWidth * currentSlide}px)`; } }); } ``` 说明: 1. HTML代码中,`<div class="carousel-container">`是轮播容器,包含图片和小点;`<div class="carousel-slide">`是图片容器,包含五张图片;`<ul class="carousel-dots">`是小点容器,包含六个小点。 2. CSS代码中,`.carousel-container`是轮播容器的样式,设置了容器的宽高、位置和溢出隐藏;`.carousel-slide`是图片容器的样式,设置了图片容器的宽高和图片的宽高;`.carousel-dots`是小点容器的样式,设置了小点容器的位置和样式。这里使用了Flex布局。 3. JavaScript代码中,首先获取了图片容器、所有图片和所有小点的元素;然后设置了初始值和初始图片位置;接着添加了小点的点击事件和自动轮播的定时器;最后编写了更新图片和小点状态的函数。在更新图片位置时,使用了CSS3过渡实现动画效果;在更新小点状态时,使用了`classList`属性和`active`类名实现样式切换;在监听过渡完成事件时,使用了`transitionend`事件实现无缝滚动。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值