轮播图是前端开发的一个重要的技术。以下使实现轮播图的三种方法:
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插件使用简单,只需要配置一些需要,就能实现轮播图的很多功能。