【HTML5】轮播图的实现方式一

实现思路：

采用老式放映机的原理，将轮播图的图片放在类似放映机的胶卷上，然后根据需求左右拉动胶卷从而播放胶卷上的图片。下列代码中的无序列表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 = "";}// 在给当前点击的按钮加activeBannerWraperBtnBoxSpan[index].className = "active";// 计算BannerWraperList的leftBannerWraperList.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();}
}