JavaScript+CSS制作简单的幻灯片

一款JavaScript+CSS制作的简单的幻灯片，通过点击下面的左右箭头符号按钮来切换不同的图片，所有图片都可以自由替换的，幻灯片的样式也可以自由调整。

分类：图片代码 > 图片轮播难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需设置好页面元素的样式，代码如下：

body {
	font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
h1 {
	text-align: center;
	margin-top: 38px;
}
.dowebok {
	width: 700px;
	margin: 0 auto;
}

.slider-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
}

.slider-nav li {
	-webkit-box-flex: 2;
	flex: 2;
	text-align: center;
	display: -webkit-box;
	display: flex;
}

img {
	max-width: 100%;
	display: none;
	-webkit-box-shadow: 10px 10px 20px 0 rgba(94,47,59,0.2);
	-moz-box-shadow: 10px 10px 20px 0 rgba(94,47,59,0.2);
	box-shadow: 10px 10px 20px 0 rgba(94,47,59,0.2);
}

img.active {
	display: block;
	-webkit-animation: fadeImg 0.8s;
	-moz-animation: fadeImg 0.8s;
	animation: fadeImg 0.8s;
}

.slider-nav {
	margin-top: 20px;
}

.slider-nav .arrow {
	flex: 0 0 15%;
}

.slider-nav a {
	flex-basis: 100%;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.slider-nav span {
	padding: 5px 10px;
	font-size: 30px;
	cursor: pointer;
}

@-webkit-keyframes fadeImg {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@-moz-keyframes fadeImg {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeImg {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

页面的body部分，一个div容器放图片，一个nav标签里放切换的按钮，代码如下：

<h1>JavaScript+CSS制作简单的幻灯片</h1>

<div class="dowebok">
	<img class="active" src="images/1.jpg">
	<img src="images/2.jpg">
	<img src="images/3.jpg">
</div>
<nav class="slider-nav">
	<ul>
		<li class="arrow">
			<a class="previous">
				<span>&lt;</span>
			</a>
		</li>
		<li class="arrow">
			<a class="next">
				<span>&gt;</span>
			</a>
		</li>
	</ul>
</nav>

页面的底部，需设置好切换按的点击事件响应，代码如下：

var items = document.querySelectorAll('img');
var itemCount = items.length;
var nextItem = document.querySelector('.next');
var previousItem = document.querySelector('.previous');
var count = 0;

function showNextItem() {
	items[count].classList.remove('active');

	if (count < itemCount - 1) {
		count++;
	} else {
		count = 0;
	}

	items[count].classList.add('active');
	console.log(count);
}

function showPreviousItem() {
	items[count].classList.remove('active');

	if (count > 0) {
		count--;
	} else {
		count = itemCount - 1;
	}

	items[count].classList.add('active');
	console.log(count);
}

nextItem.addEventListener('click', showNextItem);
previousItem.addEventListener('click', showPreviousItem);