学习笔记——轮播图的实现

---

轮播图是前端开发的一个重要的技术。以下使实现轮播图的三种方法：

1.使用纯CSS实现：

使用CSS的动画效果实现，能实现无缝轮播图，但无法实现轮播图的点击切换。

HTML：

<div class="banner w">
    <ul class="banner-slider">
        <li><a href=""><img src="images/banner-004.jpg" alt=""></a></li>
		<li><a href=""><img src="images/banner-001.jpg" alt=""></a></li>
		<li><a href=""><img src="images/banner-002.jpg" alt=""></a></li>
		<li><a href=""><img src="images/banner-003.jpg" alt=""></a></li>
		<li><a href=""><img src="images/banner-004.jpg" alt=""></a></li>
		<li><a href=""><img src="images/banner-001.jpg" alt=""></a></li>
	</ul>
</div>

CSS：

.w {
	width: 1200px;
	margin: 0 auto;
}

.banner {
	margin: 100px auto;
	position: relative;
	overflow: hidden;
}

ul.banner-slider {
	transition: all 1s ease-out;
	width: 100%;
	height: 100%;
	font-size: 0;
	white-space: nowrap;
	transform: translateX(-100%);
}

ul.banner-slider>li {
	display: inline-block;
	width: 100%;
	height: 100%;
}

ul.banner-slider>li>a {
	display: block;
	height: 100%;
}

ul.banner-slider>li>a>img {
	width: 100%;
	height: 100%;
}

/* 自定义动画 */
@keyframes banner {
	/* 开始 */
	0% { margin-left: -100%; }
	/* 等5s看第一张图片 */
	22.7%{ margin-left: -100%; }
	/* 0.5s切换到第二张图片 */
	25%{ margin-left: -200%; }
	/* 等5s看第二张图片 */
	48%{ margin-left: -200%; }
	/* 0.5s切换到第三张图片 */
	50%{ margin-left: -300%; }
	/* 等5s看第三张图片 */
	73%{ margin-left: -300%; }
	/* 0.5s切换到第四张图片 */
	75%{ margin-left: -400%; }
	/* 等5s看第四张图片 */
	98% { margin-left: -400%; }
	/* 0.5s切换到第一张图片 */
	100% { margin-left: -500%; }
	/* 百分比走的是父元素的宽度 */
}

ul {
    background-color: pink;
    width: 100%;
    font-size: 0;
    margin-left: -100%;
    /* 让盒子内部的行级元素强制不准换行 */
    white-space: nowrap;
        /* 自定义动画的名字 */
    animation-name: banner;
    /* 自定义动画持续时间 */
    animation-duration: 22s;
    /* 自定义动画播放次数 */
    animation-iteration-count: infinite;
}

运行结果：

2.使用CSS+JS实现：

HTML：

<div class="banner w">
    <ul class="banner-slider">
        <li><a href=""><img src="images/banner-004.jpg" alt=""></a></li>
		<li><a href=""><img src="images/banner-001.jpg" alt=""></a></li>
		<li><a href=""><img src="images/banner-002.jpg" alt=""></a></li>
		<li><a href=""><img src="images/banner-003.jpg" alt=""></a></li>
		<li><a href=""><img src="images/banner-004.jpg" alt=""></a></li>
		<li><a href=""><img src="images/banner-001.jpg" alt=""></a></li>
	</ul>
	<!-- 指示器 -->
	<ul class="banner-indicator">
		<li class="active"></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<!-- 耳朵图 -->
	<span class="banner-prev"></span>
	<span class="banner-next"></span>
</div>

CSS：

.banner {
	margin: 100px auto;
	position: relative;
	overflow: hidden;
}

ul.banner-slider {
	transition: all 1s ease-out;
	width: 100%;
	height: 100%;
	font-size: 0;
	white-space: nowrap;
	transform: translateX(-100%);
}

ul.banner-slider>li {
	display: inline-block;
	width: 100%;
	height: 100%;
}

ul.banner-slider>li>a {
	display: block;
	height: 100%;
}

ul.banner-slider>li>a>img {
	width: 100%;
	height: 100%;
}

/* 指示器 */
ul.banner-indicator {
	position: absolute;
	left: 50%;
	bottom: 30px;
	/* 变形----平移技术 */
	transform: translateX(-50%);
}

ul.banner-indicator>li {
	float: left;
	width: 50px;
	height: 20px;
	background-color: rgb(0,0,0,0.5);
	border-radius: 4px;
	overflow: hidden;
	margin: 0 10px;
}

ul.banner-indicator>li::before {
	content: "";
	width: 0;
	height: 100%;
	float: right;
	transition: all 1s ease-out;
	background-color: orange;	
}

ul.banner-indicator>li.active:before {
	width: 100%;
	float: left;
}

/* 耳朵图 */
span.banner-prev,span.banner-next {
	width: 50px;
	height: 100px;
	background-color: rgba(0,0,0,0.3);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}

span.banner-prev {
	left: 5%;
}

span.banner-next {
	right: 5%;
}

span.banner-prev:hover,span.banner-next:hover {
	background-color: rgba(0,0,0,0.6);
}

JS：

var index = 0; //声明全局变量，记录哪一张是激活的
var interval = 5000; //轮播间隔时间
var timer = null;  //保存计时器对象
var count = 4;     //总共实际所需的图片数量
var lock = false; //标识是否执行动画
//自动播放的时候
//点击轮播图指示器的时候
//点击上一张下一张按钮的时候
function slide(nextIndex) {
	//锁关着
	//如果当前正在执行轮播动画直接返回。
	if(lock) return;
	lock = true;  //表示某一个动画开始了
	//nextIndex: -1 0 1 2 3 4
	//index: 0 1 2 3
	// 图片切换
	var slider = document.querySelector("ul.banner-slider");
	slider.style.transitionDuration = "1s";
    slider.style.marginLeft = -1 * nextIndex + '00%';
	
	//指示器切换
	var indicators = document.querySelectorAll("ul.banner-indicator>li");
	indicators[index].className = "";
	
	//更新index
	if(nextIndex === count) {
		index = 0;
	}
	else if(nextIndex === -1) {
		index = count - 1;
	}
	else {
		index = nextIndex;
	}
	indicators[index].className = "active";
	// 重置实现无缝效果
	// setTimeout()每隔多少时间只执行一次事件
	setTimeout(function() {
		slider.style.transitionDuration = "0s";
		if(nextIndex === count) slider.style.marginLeft = "0%";
		if(nextIndex === -1) slider.style.marginLeft = -1 * (count-1) + "00%";
		lock = false;  // 动画结束后开锁
	}, 1020);
}

// 自动播放
function play() {
	timer = setInterval(function() {
		slide(index + 1);
    }, interval);
}

// 鼠标滑到banner区域停止自动播放
document.querySelector(".banner").onmouseover = function() { clearInterval(timer); };
// 鼠标滑出banner区域恢复自动播放
document.querySelector(".banner").onmouseout = function() {  play(); };

//指示器点击切换轮播图
var indicators = document.querySelectorAll("ul.banner-indicator>li");
for(var i = 0; i < indicators.length; i++) {
	indicators[i].b = i;
	indicators[i].onclick = function() {
		if(this.className === "active") return;
		slide(this.b);
	};
}

//上一张点击事件
document.querySelector("span.banner-prev").onclick = function() {
	//三步运算符
	slide(index - 1);
};

//下一张
document.querySelector("span.banner-next").onclick = function() {
	slide(index + 1);
};

//首次播放
play();

运行结果：

 

3.使用swiper插件：

现在，一些大牛程序员写了一些很好用的第三方插件，swiper插件使用简单，只需要配置一些需要，就能实现轮播图的很多功能。