下面我就详细讲解“原生JS实现匀速图片轮播动画”的完整攻略:
一、概述
图片轮播动画是网页设计中常用的效果,它能够增加页面的美感,并且能够呈现多个图片,帮助用户更好的了解网站的内容。本攻略将介绍如何使用原生JS实现匀速图片轮播动画。
二、实现步骤
1. HTML结构
首先,在HTML中需要创建一个容器,用于存储图片和轮播进度条。HTML结构如下:
<div class="slider-container">
<div class="slider-list">
<img src="xxx.jpg" alt="">
<img src="yyy.jpg" alt="">
...
</div>
<ul class="slider-nav"></ul>
</div>
在上述代码中,slider-container
是轮播的容器,slider-list
是图片列表容器,slider-nav
是轮播进度条容器。需要注意的是,slider-list
容器中需要添加多个img
元素,这些元素就是需要展示的图片。另外,轮播进度条可以选择使用ul
和li
元素实现。
2. CSS样式
对于轮播容器和列表容器,需要添加如下CSS样式:
.slider-container {
width: 600px;
height: 400px;
overflow: hidden;
position: relative; /*轮播容器需要设置相对定位*/
}
.slider-list {
position: absolute; /*图片列表容器需要设置绝对定位*/
top: 0;
left: 0;
width: 6000px; /*图片列表容器需要设置超出可见区域*/
height: 400px;
}
.slider-list img {
float: left; /*图片需要设置浮动,以便列表容器能够自适应高度*/
width: 600px;
height: 400px;
}
对于轮播进度条容器,需要添加如下CSS样式:
.slider-nav {
position: absolute; /*轮播进度条容器需要设置绝对定位*/
bottom: 20px;
left: 50%;
}
.slider-nav li {
display: inline-block; /*轮播进度条子项需要设置为行内块元素*/
width: 10px;
height: 10px;
margin: 0 5px;
background-color: #fff;
border-radius: 50%; /*实现圆形效果*/
cursor: pointer;
}
.slider-nav li.active {
background-color: #666; /*设置激活状态下的背景色*/
}
3. JS实现
在JS中,需要通过获取相应的元素,计算图片的宽度和总页数,以及添加轮播进度条的子项等操作。核心逻辑如下:
var $sliderContainer = document.querySelector('.slider-container');
var $sliderList = document.querySelector('.slider-list');
var $sliderImgs = document.querySelectorAll('.slider-list img');
var $sliderNav = document.querySelector('.slider-nav');
var $sliderNavItems = null;
var imgWidth = $sliderImgs[0].offsetWidth;
var pageCount = $sliderImgs.length;
var curIndex = 0;
// 初始化
init();
function init() {
renderNav(); // 添加轮播进度条子项
bindEvents(); // 绑定事件
startTimer(); // 启动自动播放
}
// 添加轮播进度条子项
function renderNav() {
var navHtml = '';
for (var i = 0; i < pageCount; i++) {
navHtml += '<li></li>';
}
$sliderNav.innerHTML = navHtml;
$sliderNavItems = $sliderNav.querySelectorAll('li');
setActive(0);
}
// 绑定事件
function bindEvents() {
// 鼠标悬停事件
$sliderContainer.addEventListener('mouseover', function() {
stopTimer();
});
$sliderContainer.addEventListener('mouseleave', function() {
startTimer();
});
// 轮播进度条子项点击事件
$sliderNav.addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
var index = Array.prototype.indexOf.call($sliderNavItems, e.target);
setActive(index);
slideTo(index);
}
});
}
// 设置当前轮播进度条项
function setActive(index) {
for (var i = 0; i < pageCount; i++) {
if (i === index) {
$sliderNavItems[i].className = 'active';
} else {
$sliderNavItems[i].className = '';
}
}
}
// 滑动到指定序号
function slideTo(index) {
var curLeft = -$sliderList.offsetLeft;
var targetLeft = imgWidth * index;
var startTime = new Date().getTime();
var duration = 500; // 动画时长
var timer = setInterval(function() {
var curTime = new Date().getTime() - startTime;
var percent = curTime / duration;
if (percent > 1) {
percent = 1;
}
var newLeft = curLeft + (targetLeft - curLeft) * percent;
$sliderList.style.left = -newLeft + 'px';
if (percent === 1) {
clearInterval(timer);
}
}, 10);
}
// 启动自动播放
function startTimer() {
clearInterval(timer);
timer = setInterval(function() {
curIndex++;
if (curIndex >= pageCount) {
curIndex = 0;
}
setActive(curIndex);
slideTo(curIndex);
}, 3000);
}
// 停止自动播放
function stopTimer() {
clearInterval(timer);
}
4. 示例说明
接下来,本攻略将给出两个不同的示例,帮助读者更好地理解和实践上述代码:
示例1
在第一个示例中,假设轮播的图片只有两张,即:
<div class="slider-container">
<div class="slider-list">
<img src="xxx.jpg" alt="">
<img src="yyy.jpg" alt="">
</div>
<ul class="slider-nav"></ul>
</div>
此时,只需要将JS中的init()
函数中的startTimer()
语句注释掉,即可实现静态的轮播效果。具体实现可以参考以下代码:
function init() {
renderNav();
bindEvents();
// startTimer();
}
示例2
在第二个示例中,假设轮播的图片有五张,并且需要添加文字说明,即:
<div class="slider-container">
<div class="slider-list">
<img src="xxx.jpg" alt="">
<div class="slider-item-desc">
<p>图1说明文字</p>
</div>
<img src="yyy.jpg" alt="">
<div class="slider-item-desc">
<p>图2说明文字</p>
</div>
...
</div>
<ul class="slider-nav"></ul>
</div>
此时,我们需要通过添加CSS样式,来使得图片和文字可以重叠在一起。具体代码如下:
.slider-item-desc {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
background-color: rgba(0, 0, 0, 0.5); /*添加半透明背景色*/
color: #fff;
}
.slider-item-desc p {
margin: 0;
padding: 0;
}
同时,需要在JS中添加以下语句,以便轮播效果照常工作:
var $sliderItemDescs = $sliderList.querySelectorAll('.slider-item-desc');
function setActive(index) {
for (var i = 0; i < pageCount; i++) {
if (i === index) {
$sliderNavItems[i].className = 'active';
$sliderItemDescs[i].style.display = 'block';
} else {
$sliderNavItems[i].className = '';
$sliderItemDescs[i].style.display = 'none';
}
}
}
三、总结
通过以上步骤,我们成功实现了匀速图片轮播动画。需要注意的是,本攻略中所提到的代码和示例只能用于参考,如果想要实现更多的效果,还需要根据实际情况进行修改和拓展。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生JS实现匀速图片轮播动画 - Python技术站