实现思路:
采用老式放映机的原理,将轮播图的图片放在类似放映机的胶卷上,然后根据需求左右拉动胶卷从而播放胶卷上的图片。下列代码中的无序列表ul则相当与胶卷一样。
1.页面整体布局
<div class="banner">
<div class="banner_wraper">
<ul class="banner_wraper_list">
<li class="banner_wraper_list_item"><a href="###"><img src="./images/banner_pic_01.jpg"></a></li>
<li class="banner_wraper_list_item"><a href="###"><img src="./images/banner_pic_02.jpg"></a></li>
<li class="banner_wraper_list_item"><a href="###"><img src="./images/banner_pic_03.jpg"></a></li>
</ul>
<button class="banner_wraper_left_btn h_btn iconfont icon-left"></button>
<button class="banner_wraper_right_btn h_btn iconfont icon-right"></button>
<div class="banner_wraper_btn_box">
<span>1</span><span class="active">2</span><span>3</span>
</div>
</div>
</div>
2.css样式
.banner{
height: 300px;
position: relative;
overflow: hidden;
}
.banner_wraper{
width: 1920px;
height: 300px;
position: absolute;
left: 50%;
margin-left: -960px;
overflow: hidden;
border: 2px solid red;
}
.banner_wraper_list{
height: 300px;
width: 5780px; /*临时宽度*/
position: absolute;
left: 0;
transition: 0.3s;
border: 1px solid blue;
}
.banner_wraper_list_item{
float: left;
}
.banner_wraper_left_btn {
left: 400px;
}
/* 这里两个按钮相同样式可以合并一下 */
.banner_wraper_right_btn {
right: 400px;}
.h_btn{
position: absolute;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
border: none;
color: white;
font-size: 30px;
background-color:rgba(0,0,0,0.8);
}
.banner_wraper_btn_box{
position: absolute;
left: 50%;
margin-left: -75px;
bottom: 10px;
width: 150px;
height: 10px;
display: flex;
}
.banner_wraper_btn_box span {
flex: 1;
cursor: pointer;
text-indent: -99999px;
background-color:#09c762 ;
}
.banner_wraper_btn_box .active{
background-color: white;
}
3.js部分
window.onload = function(){
//轮播图
carousel()
}
function carousel(){
//第一步: 获取所有要用到的标签
let Banner= document.querySelector('.banner');
let BannerWraperList = document.querySelector('.banner_wraper_list');
let BannerWraperListItem = document.querySelectorAll('.banner_wraper_list_item');
let BannerWraperLeftBtn = document.querySelector('.banner_wraper_left_btn');
let BannerWraperRightBtn = document.querySelector('.banner_wraper_right_btn');
let BannerWraperBtnBoxSpan = document.querySelectorAll('.banner_wraper_btn_box span');
let index = 0;
// 第二步: 给按钮添加事件
for (let i = 0; i < BannerWraperBtnBoxSpan.length; i++) {
BannerWraperBtnBoxSpan[i].onclick = function () {
index = i;
move();
}
}
function move() {
// 先将所有按钮class清空
for (let j = 0; j < BannerWraperBtnBoxSpan.length; j++) {
BannerWraperBtnBoxSpan[j].className = "";
}
// 在给当前点击的按钮加active
BannerWraperBtnBoxSpan[index].className = "active";
// 计算BannerWraperList的left
BannerWraperList.style.left = - index * 1920 + "px";
}
// 第三步: 实现轮播图自动播放
let timer="";
timer = setInterval(autoPlay, 3000);
function autoPlay(){
index++;
if(index>= BannerWraperBtnBoxSpan.length){
index =0;
}
move();
}
// 第四步:实现鼠标悬停--停止播放 鼠标离开--自动播放
Banner.onmouseover= function(){
clearInterval(timer);
}
Banner.onmouseout= function(){
timer = setInterval(autoPlay, 3000);
}
// 第五步: 实现点击左右按钮,滚动轮播图
BannerWraperRightBtn.onclick = function(){
autoPlay();
}
BannerWraperLeftBtn.onclick = function(){
index--;
if(index<0){
index = BannerWraperBtnBoxSpan.length-1;
}
move();
}
}