无缝连接轮播
轮播图是很多项目中经常会需要的,轮播图这个东西说简单也简单,说难也难,今天我就为大家整理了轮播图当中的一种**“无缝轮播滚动”**
HTML代码:
<!-- 轮播图区域 -->
<div class="banner">
<!-- 装轮播里内容的盒子 -->
<div class="bannerbox" id="bannerbox">
<!-- 装图片的盒子宽为下面图片的七倍 -->
<div id="ba" class="ba">
<!--在每张图片的后面注释是为了防止换行造成的边距-->
<img src="img/ban5.jpg"><!--
--><img src="img/ban1.jpg"><!--
--><img src="img/ban2.jpg"><!--
--><img src="img/ban3.jpg"><!--
--><img src="img/ban4.jpg"><!--
--><img src="img/ban5.jpg"><!--
--><img src="img/ban1.jpg">
</div>
<!-- 向左向右按钮 -->
<div class="leftbtn" id="btnleft"></div>
<div class="rightbtn" id="btnright"></div>
<!-- 小圆点 -->
<ul class="yd" id="yd">
<li ></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 小盒子 -->
<div class="limgbox" id="limgbox">
<div id="d1"><img src="img/ban1.jpg" width="100px" height="20px"></div>
<div><img src="img/ban2.jpg" width="100px" height="20px"></div>
<div><img src="img/ban3.jpg" width="100px" height="20px"></div>
<div><img src="img/ban4.jpg" width="100px" height="20px"></div>
<div><img src="img/ban5.jpg" width="100px" height="20px"></div>
</div>
</div>
</div>
css代码:
.bannerbox{
height: 410px;
overflow: hidden;
position: relative;
}
.bannerbox>#ba>img{
transition: 2s;
}
/* 轮播方法二 */
.ba{
width: 13440px;
height: 410px;
position: relative;
transition: 1s;
margin-left: -1920px;
}
/* 两个按钮 */
.leftbtn{
width: 45px;
height: 80px;
background: url(../img/bannerIco.png) 0px -42px;
position: absolute;
top: 50%;
margin-top: -40px;
left: 50%;
margin-left: -490px;
display: none;
cursor: pointer;
}
.rightbtn{
width: 45px;
height: 80px;
background: url(../img/bannerIco.png) -80px -42px;
position: absolute;
top: 50%;
margin-top: -40px;
right: 50%;
margin-right: -490px;
display: none;
cursor: pointer;
}
/* 小圆点 */
.yd{
width: 100px;
position: absolute;bottom: 10px;
left: 50%;
}
.yd>li{
display: inline-block;
width: 10px;height: 10px;
border: 1px solid #999;
border-radius: 50%;
background-color: rgb(194,202,199);
}
.yd>li:nth-child(1){
background-color: rgb(134,151,145);
}
/* 轮播图缩略图 */
.limgbox{
position: absolute;
width: 580px;
height: 70px;
background-color: rgba(0,0,0,.6);
bottom: 0px;
left: 50%;
margin-left: -290px;
display: flex;
box-sizing: border-box;
justify-content: space-around;
align-items: center;
display: none;
}
.limgbox>div{
display: inline-block;
width: 102px;
height: 45px;
cursor: pointer;
text-align: center;
line-height: 45px;
border: 1px solid transparent;
}
.limgbox>div>img{
vertical-align: middle;
}
.limgbox>div:hover{
border: 1px solid #fff;
}
/* 鼠标移入轮播 */
.bannerbox:hover>.leftbtn{
display: block;
}
.bannerbox:hover>.rightbtn{
display: block;
}
.bannerbox:hover>.limgbox{
display: flex;
}
JS代码:
// 轮播图方法2
var index=0;
var btnleft=document.getElementById("btnleft");
var btnright=document.getElementById("btnright");
// 获取所有的图片
var banbox=document.getElementById("ba");
var imgs=banbox.getElementsByTagName("img");
//获取原点
var yd=document.getElementById("yd");
let yds=yd.getElementsByTagName("li");
//获取小图片
var smbox=document.getElementById("limgbox");
var limgs=smbox.getElementsByTagName("div");
let jl=2;
// 点击左边按钮
btnleft.onclick=function(){
lb();
}
btnright.onclick=function(){
rlb();
}
var timer;
// 开启轮播
zdlunbo();
//自动轮播
function zdlunbo(){
timer=setInterval(function(){
lb();
},2000)
}
// 左轮播
function lb(){
// 先把所有原点和小图片的样式清除
for (var i = 0; i < yds.length; i++) {
yds[i].style.background="rgb(194,202,199)";
limgs[i].style.borderColor="transparent";
}
// 修改图片的左外边距
banbox.style.marginLeft=-jl*1920+"px";
// 如果这是最后一张图就执行下面的代码
if(jl>=6){
//先将过渡时间变为0,再将整个box回到初始位置
//无缝轮播核心
banbox.style.transition="0s";
banbox.style.marginLeft="0px";
// 通过延时将图片向左移动一张,给人一种错觉就相当于重新来一圈
setTimeout(function(){
banbox.style.transition="margin-left 1s";
banbox.style.marginLeft="-1920px";
},10)
// 再将下标回到第三张
jl=2;
}
else{
//否则图片正常轮播
jl++;
banbox.style.transition="margin-left 1s"
}
// 最后将原点样式设置
yds[jl-2].style.background="rgb(134,151,145)";
limgs[jl-2].style.borderColor="#fff";
}
// 右轮播
function rlb(){
for (var i = 0; i < yds.length; i++) {
yds[i].style.background="rgb(194,202,199)";
limgs[i].style.borderColor="transparent";
}
banbox.style.marginLeft=-(jl-2)*1920+"px";
if(jl<=2){
//先将过渡时间变为0,再将整个box回到初始位置
banbox.style.transition="0s";
banbox.style.marginLeft="-11520px";
jl=6;
setTimeout(function(){
banbox.style.transition="margin-left 1s"
banbox.style.marginLeft="-9600px"
},10)
}
else{
jl--;
banbox.style.transition="margin-left 1s"
}
// 原点样式
yds[jl-2].style.background="rgb(134,151,145)";
limgs[jl-2].style.borderColor="#fff";
}
var bo=document.getElementById("bannerbox");
// 鼠标移入停止
bo.onmouseover=function(){
clearInterval(timer);
}
// 鼠标移出继续轮播
bo.onmouseout=function(){
clearInterval(timer);
zdlunbo();
}
// 鼠标移入小盒子里的图片
for (let m = 0; m < limgs.length; m++) {
limgs[m].onmouseenter=function(){
//因为前面多放了一张图片,所以m得加一
jl=m+1;
lb();
}
}