下面是JS仿小米官网图片轮播特效的完整攻略。
1. 实现思路
轮播图可以利用 JavaScript 配合 CSS 动画来方式实现。我们可以利用 JavaScript 的定时器 setInterval 来不断地改变图片的位置,同时利用 CSS 的动画为图片添加渐变效果。
具体实现步骤如下:
- 在 HTML 中添加轮播图的容器,包含各个图片和指示器。
- 在 CSS 中为轮播图容器和图片添加样式,包括指定容器的宽高、定位方式等,以及实现图片的渐变效果。
- 在 JavaScript 中获取轮播图容器和图片元素,计算每张图片的宽度、总数量等,然后使用 setInterval 实现轮播逻辑。
- 为轮播图容器添加鼠标移入移出监听事件,当鼠标移入容器时停止轮播,移出时重新开始。
2. 代码实现
下面是使用纯 JavaScript 实现的一些示例代码:
2.1 HTML 代码
<div class="carousel-container">
<ul class="carousel-list">
<li>
<img src="img1.jpg" alt="img1">
</li>
<li>
<img src="img2.jpg" alt="img2">
</li>
<li>
<img src="img3.jpg" alt="img3">
</li>
<li>
<img src="img4.jpg" alt="img4">
</li>
</ul>
<div class="carousel-nav">
<span class="nav-dot active"></span>
<span class="nav-dot"></span>
<span class="nav-dot"></span>
<span class="nav-dot"></span>
</div>
</div>
2.2 CSS 代码
.carousel-container {
position: relative;
width: 640px;
height: 360px;
overflow: hidden;
}
.carousel-list {
list-style: none;
margin: 0;
padding: 0;
width: 2560px;
animation: carousel 15s infinite;
}
.carousel-list li {
float: left;
width: 640px;
height: 360px;
}
.carousel-list li img {
display: block;
width: 100%;
height: 100%;
}
.carousel-nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.nav-dot {
display: inline-block;
margin: 0 8px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #bbb;
cursor: pointer;
}
.active {
background-color: #f60;
}
@keyframes carousel {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -640px;
}
45% {
left: -640px;
}
50% {
left: -1280px;
}
70% {
left: -1280px;
}
75% {
left: -1920px;
}
95% {
left: -1920px;
}
100% {
left: -2560px;
}
}
2.3 JavaScript 代码
// 获取轮播图的元素
var carouselContainer = document.querySelector('.carousel-container');
var carouselList = document.querySelector('.carousel-list');
var carouselNav = document.querySelector('.carousel-nav');
var dots = document.querySelectorAll('.nav-dot');
// 计算每张图片的宽度和总数量
var picWidth = carouselContainer.offsetWidth;
var picNum = carouselList.children.length;
// 定义当前图片的索引
var currentIndex = 0;
// 通过设置 left 值实现轮播效果
function carousel() {
currentIndex++;
if (currentIndex >= picNum) {
currentIndex = 0;
}
carouselList.style.left = -currentIndex * picWidth + 'px';
setActiveDot(currentIndex);
}
// 设置当前激活的小圆点
function setActiveDot(index) {
for (var i = 0; i < dots.length; i++) {
dots[i].classList.remove('active');
}
dots[index].classList.add('active');
}
// 切换到指定的图片
function goTo(index) {
currentIndex = index;
carouselList.style.left = -currentIndex * picWidth + 'px';
setActiveDot(currentIndex);
}
// 监听鼠标移入移出事件
carouselContainer.addEventListener('mouseover', function() {
clearInterval(timer);
});
carouselContainer.addEventListener('mouseout', function() {
timer = setInterval(carousel, 3000);
});
// 监听小圆点点击事件
carouselNav.addEventListener('click', function(event) {
if (event.target.classList.contains('nav-dot')) {
var index = Array.prototype.indexOf.call(dots, event.target);
goTo(index);
}
});
// 初始化
var timer = setInterval(carousel, 3000);
3. 注意事项
- 轮播图容器和图片的宽高必须设定为固定值,否则无法实现轮播效果。
- 轮播图容器需要设置
overflow: hidden;
才能实现图片的切换效果。 - 鼠标移入轮播图容器时,必须停止定时器,否则会产生冲突。
- 轮播图需要有指示器来提示当前图片的位置,用户可以点击指示器快速切换图片。
- 在移动设备上需要注意触摸事件的使用,可以使用 touchstart 和 touchend 实现手指滑动切换图片的效果。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js仿小米官网图片轮播特效 - Python技术站