如何利用HTML+JS+CSS实现无缝轮播?

轮播基本上无论是在web网站,还是移动站点,还是APP里面,作为主要的展示途径,以及一些电子广告牌,都是必不可少的!

那么如何利用前端技术来实现无缝轮播呢?、

代码如下!

HTML5代码

<!– 轮播图区域 –>
<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();
}
}

————下载必看————

1、资源通过互联网渠道公开获取,仅供阅读测试,请在下载后24小时内删除,谢谢合作!
2、若版权方认为本站侵权,请联系发邮件至(rsstime@qq.com)处理。
3、本站解压密码统一为:yudouyudou

时光屋 » 如何利用HTML+JS+CSS实现无缝轮播?

发表评论

至臻视听_发烧收藏

会员介绍 常见问题