下面我将详细讲解原JS实现banner图的常用功能的完整攻略。
1. 常用功能介绍
在实现banner图过程中，以下是一些常用的功能：
1.1 图片轮播
图片轮播是banner图的核心功能，它可以通过设置图片列表和定时器来实现。轮播过程可以采用两种方式：水平轮播和垂直轮播。图片轮播一般会包含以下功能：
- 自动轮播：按照一定时间间隔自动切换图片
- 手动切换：用户可以通过点击向左/右的按钮或者指示器，切换到其他图片
- 切换动画：各种切换动画效果，例如渐变、滑动等等
- 标题/描述信息：添加相应的文本描述信息，提高用户体验
1.2 轮播图优化
轮播图的性能优化也是一个非常重要的问题。为了提高页面的加载速度和用户体验，轮播图可以实现以下功能：
- 懒加载：只在需要的时候才加载图片
- 预加载：提前加载当前图片的下一张和上一张图片，提高用户切换体验
- 自适应大小：适应不同的设备窗口大小
- 鼠标悬停暂停：用户在鼠标移动到轮播区域时，自动停止轮播
2. 实现方式
接下来我们将介绍如何利用原生JS实现banner图。
2.1 图片轮播实现
2.1.1 图片轮播布局
首先，我们需要在HTML页面中创建一个轮播图盒子，在盒子中添加一组图片以及导航按钮（左右切换和指示器）。
<div class="banner-wrap">
<ul class="banner-list">
<li><a href=""><img src="img/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/4.jpg" alt=""></a></li>
<li><a href=""><img src="img/5.jpg" alt=""></a></li>
</ul>
<a href="javascript:;" class="btn-prev"></a>
<a href="javascript:;" class="btn-next"></a>
<ul class="banner-nav">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
2.1.2 图片轮播样式
然后，我们需要为轮播图盒子以及内部元素添加样式。
.banner-wrap {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.banner-list {
position: absolute;
width: 500%;
height: 100%;
left: 0;
top: 0;
}
.banner-list li {
position: relative;
float: left;
width: 20%;
height: 100%;
}
.banner-list img {
display: block;
width: 100%;
height: 100%;
}
.btn-prev,
.btn-next {
position: absolute;
width: 60px;
height: 60px;
top: 50%;
margin-top: -30px;
background: url(img/icon.png) no-repeat;
background-position: -64px -64px;
cursor: pointer;
}
.btn-prev {
left: 20px;
background-position: 0 -64px;
}
.btn-next {
right: 20px;
}
.banner-nav {
position: absolute;
width: 100%;
height: 20px;
bottom: 10px;
left: 0;
text-align: center;
font-size: 0;
}
.banner-nav li {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
.banner-nav li.active {
background: blue;
}
2.1.3 图片轮播逻辑实现
最后，我们需要运用原生JS为轮播图添加图片自动播放，手动切换，动画效果和文本信息等功能。以下是一个基于原生JS实现的代码示例：
// 获取元素
var bannerWrap = document.querySelector('.banner-wrap');
var bannerList = bannerWrap.querySelector('.banner-list');
var bannerNav = bannerWrap.querySelector('.banner-nav');
var btnPrev = bannerWrap.querySelector('.btn-prev');
var btnNext = bannerWrap.querySelector('.btn-next');
var navItems = bannerNav.querySelectorAll('li');
// 默认参数
var slideIndex = 1; // 当前显示图片的下标
var interval = 3000; // 轮播间隔
var timer = null; // 定时器句柄
var isAnimate = false; // 是否正在滑动
var animateTime = 600; // 动画过渡时间
var animateDistance = 100; // 滑动距离
// 初始位置
function setSlidePosition(slideIndex, distance) {
bannerList.style.transition = distance ? 'none' : '';
bannerList.style.transform = 'translate3d(' + (-slideIndex * 20) + '%, 0, 0)';
}
// 切换到或从第一张或最后一张图, 需要瞬间移动
function switchTo(slideIndex) {
if (slideIndex <= 0) {
setSlidePosition(slideIndex, animateDistance);
slideIndex = navItems.length;
} else if (slideIndex > navItems.length) {
setSlidePosition(slideIndex, animateDistance);
slideIndex = 1;
}
return slideIndex;
}
// 添加指示器按钮事件
for (var i = 0, length = navItems.length; i < length; i++) {
navItems[i].index = i + 1;
navItems[i].addEventListener('click', function() {
if (isAnimate) return;
isAnimate = true;
var targetIndex = this.index;
slideIndex = targetIndex;
setActiveNav(targetIndex);
slide(targetIndex - slideIndex, animateTime);
});
}
// 添加上一页按钮事件
btnPrev.addEventListener('click', function() {
if (isAnimate) return;
isAnimate = true;
slideIndex = switchTo(slideIndex - 1);
setActiveNav(slideIndex);
slide(1, animateTime);
});
// 添加下一页按钮事件
btnNext.addEventListener('click', function() {
if (isAnimate) return;
isAnimate = true;
slideIndex = switchTo(slideIndex + 1);
setActiveNav(slideIndex);
slide(-1, animateTime);
});
// 切换到指定图片
function slide(offset, time) {
var currentLeft = -slideIndex * 20;
var targetLeft = currentLeft + offset * 20;
setSlidePosition(slideIndex + offset, animateDistance);
setTimeout(function() {
setSlidePosition(slideIndex + offset);
isAnimate = false;
}, time);
}
// 设置当前位置标记
function setActiveNav(index) {
slideIndex = switchTo(index);
for (var i = 0, length = navItems.length; i < length; i++) {
if (navItems[i].classList.contains('active')) {
navItems[i].classList.remove('active');
break;
}
}
navItems[slideIndex - 1].classList.add('active');
}
// 自动轮播功能
function autoPlay() {
timer = setInterval(function() {
btnNext.click();
}, interval);
}
autoPlay();
bannerWrap.addEventListener('mouseenter', function() {
clearInterval(timer);
});
bannerWrap.addEventListener('mouseleave', function() {
autoPlay();
});
2.2 轮播图优化实现
2.2.1 图片懒加载实现
图片懒加载的实现主要是利用原生JS中的IntersectionObserver API。该API可以监听指定元素与视口的交叉状态，并执行相应的动作。以下是一个基于原生JS实现图片懒加载的代码示例：
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
document.querySelectorAll('.lazyload').forEach(function(img) {
observer.observe(img);
});
以上代码中，我们首先创建一个IntersectionObserver实例，然后调用该实例的observe方法，绑定需要懒加载的图片元素。当图片元素与视口交叉时，将data-src属性值赋给src属性，实现图片懒加载功能。
2.2.2 图片预加载实现
图片预加载同样可以利用原生JS实现。以下是一个基于原生JS实现图片预加载的代码示例：
function preloadImg(imgSrc) {
var img = new Image();
img.src = imgSrc;
if (img.complete) {
console.log(imgSrc + ' 已经被缓存过了');
} else {
img.onload = function() {
console.log(imgSrc + ' 加载完成');
}
img.onerror = function() {
console.log(imgSrc + ' 加载失败');
}
}
}
preloadImg('http://example.com/img/1.jpg');
preloadImg('http://example.com/img/2.jpg');
以上代码中，我们可以定义一个函数preloadImg，传入需要预加载的图片src地址。然后创建一个图片对象，将图片src地址赋值给img元素的src，使用onload和onerror事件监听图片加载完成和加载失败事件。
2.2.3 自适应大小实现
自适应大小可以通过百分比和媒体查询来实现。以下是一个基于原生JS实现自适应大小的代码示例：
function resizeBanner() {
var clientWidth = document.documentElement.clientWidth;
var bannerList = document.querySelector('.banner-list');
var bannerItem = bannerList.querySelectorAll('li');
for (var i = 0, length = bannerItem.length; i < length; i++) {
bannerItem[i].style.width = clientWidth + 'px';
}
bannerList.style.width = clientWidth * bannerItem.length + 'px';
}
window.onresize = function() {
resizeBanner();
}
resizeBanner();
以上代码中，我们声明一个resizeBanner函数，在该函数中获取页面的clientWidth，并将其赋值给轮播图中的每一个图片li元素的宽度。然后将bannerList的宽度也设置为li元素宽度之和。
最后，在窗口大小变化时，调用resizeBanner函数，即可实现轮播图的自适应大小效果。
2.2.4 鼠标悬停暂停实现
鼠标悬停暂停可以利用原生JS中的setInterval和clearInterval实现。以下是一个基于原生JS实现鼠标悬停暂停的代码示例：
var bannerWrap = document.querySelector('.banner-wrap');
var timer = null;
var interval = 3000;
function autoPlay() {
timer = setInterval(function() {
btnNext.click();
}, interval);
};
autoPlay();
bannerWrap.addEventListener('mouseenter', function() {
clearInterval(timer);
});
bannerWrap.addEventListener('mouseleave', function() {
autoPlay();
});
以上代码中，我们声明一个autoPlay函数，该函数利用setInterval方法定时切换图片。然后，在轮播图盒子上绑定mouseenter和mouseleave事件，分别在鼠标悬停和离开时，暂停和恢复自动轮播。
总结
本文主要介绍了原生JS实现banner图的常用功能和实现方式。其中，图片轮播是banner图的核心功能，而轮播图的性能优化，则可以提高页面的加载速度和用户体验。我相信，理解了本文的内容，在实现banner图时，就会更加得心应手。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原JS实现banner图的常用功能 - Python技术站
微信扫一扫 
支付宝扫一扫 