JS如何实现竖屏轮播图
首先是HTML搭建结构
<div class="banner-box">
<div class="bannerbox">
<div class="banner">
<a class="a-img-ban"> <img class="img-ban" src="./img/640 (4).jpg" alt="终于等到你还好我没放弃"
title="终于等到你还好我没放弃">
</a>
<a class="a-img-ban"> <img class="img-ban" src="./img/640 (18).jpg" alt="关注我们"> </a>
<a class="a-img-ban"> <img class="img-ban" src="./img/640 (19).jpg" alt="在最好的年纪遇到你,才算没有辜负自己"> </a>
<a class="a-img-ban"> <img class="img-ban" src="./img/640 (5).jpg" alt="终于等到你吧"> </a>
<a class="a-img-ban"> <img class="img-ban" src="./img/640 (14).jpg" alt="终于等到你吧"> </a>
<a class="a-img-ban"> <img class="img-ban" src="./img/640 (15).jpg" alt="终于等到你吧"> </a>
<a class="a-img-ban"> <img class="img-ban" src="./img/640 (16).jpg" alt="终于等到你吧"> </a>
<a class="a-img-ban"> <img class="img-ban" src="./img/640 (17).jpg" alt="终于等到你吧"> </a>
<ul>
<li class="li-img"><img src="./img/640 (4).jpg" alt="终于等到你还好我没放弃"></li>
<li class="li-img"><img src="./img/640 (18).jpg" alt="关注我们"></li>
<li class="li-img"><img src="./img/640 (19).jpg" alt="在最好的年纪遇到你,才算没有辜负自己"></li>
<li class="li-img"><img src="./img/640 (5).jpg" alt="终于等到你吧"></li>
<li class="li-img"><img src="./img/640 (14).jpg" alt="终于等到你吧"></li>
<li class="li-img"><img src="./img/640 (15).jpg" alt="终于等到你吧"></li>
<li class="li-img"><img src="./img/640 (16).jpg" alt="终于等到你吧"></li>
<li class="li-img"><img src="./img/640 (17).jpg" alt="终于等到你吧"></li>
</ul>
</div>
</div>
</div>其次是css页面，给结构添加样式
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
/* 首页轮播图 banner-box*/
.banner-box {
width: 100%;
display: inline-block;
padding: 10px;
}
.bannerbox {
width: 600px;
height: 500px;
margin: 0 auto;
}
.banner {
width: 600px;
height: 500px;
float: left;
position: relative;
}
.banner .a-img-ban {
position: absolute;
top: 0;
left: 0;
display: block;
z-index: 9;
width: 555px;
height: 500px;
opacity: 0;
-webkit-transition: opacity .5s linear 0s;
-moz-transition: opacity .5s linear 0s;
-ms-transition: opacity .5s linear 0s;
-o-transition: opacity .5s linear 0s;
transition: opacity .5s linear 0s
}
.banner .a-img-ban .img-ban {
width: 555px;
height: 500px;
position: absolute;
z-index: 9;
}
.banner .img-ban-curr {
opacity: 1;
z-index: 10
}
.banner ul {
width: 300px;
float: right;
}
.banner ul li {
width: 54%;
padding: 8px;
background: #eee;
margin-bottom: 5px;
height: 90px;
cursor: pointer;
-webkit-transition: background-color .3s linear 0s;
-moz-transition: background-color .3s linear 0s;
-ms-transition: background-color .3s linear 0s;
-o-transition: background-color .3s linear 0s;
transition: background-color .3s linear 0s;
}
.banner ul li.curr {
background: #f0d0a9;
}
.banner ul li img {
width: 80%;
display: block;
height: 100%;
}
ul,
li {
list-style: none;
}
/* 首页轮播图 banner-box*/
.banner-box {
width: 100%;
display: inline-block;
padding: 10px;
}
.bannerbox {
width: 1050px;
height: 440px;
margin: 0 auto;
}
.banner {
width: 1050px;
height: 440px;
float: left;
position: relative;
}
.banner .a-img-ban {
position: absolute;
top: 0;
left: 0;
display: block;
z-index: 9;
width: 555px;
height: 440px;
opacity: 0;
-webkit-transition: opacity .5s linear 0s;
-moz-transition: opacity .5s linear 0s;
-ms-transition: opacity .5s linear 0s;
-o-transition: opacity .5s linear 0s;
transition: opacity .5s linear 0s
}
.banner .a-img-ban .img-ban {
width: 555px;
height: 440px;
position: absolute;
z-index: 9;
}
.banner .img-ban-curr {
opacity: 1;
z-index: 10
}
.banner ul {
width: 300px;
float: right;
}
.banner ul li {
width: 54%;
padding: 8px;
background: #eee;
margin-bottom: 5px;
height: 90px;
cursor: pointer;
-webkit-transition: background-color .3s linear 0s;
-moz-transition: background-color .3s linear 0s;
-ms-transition: background-color .3s linear 0s;
-o-transition: background-color .3s linear 0s;
transition: background-color .3s linear 0s;
}
.banner ul li.curr {
background: #f0d0a9;
}
.banner ul li img {
width: 100%;
display: block;
height: 100%;
}再者就是js页面，实现结构的动态行为
<script>
$(function() {
$(".a-img-ban").eq(0).addClass('img-ban-curr');
$(".li-img").eq(0).addClass('curr');
var n = 0;
setInterval(function() {
if (n >= $('.li-img').length) {
n = 0;
}
$(".a-img-ban").eq(n).addClass('img-ban-curr').siblings('.a-img-ban').removeClass(
'img-ban-curr');
$(".li-img").eq(n).addClass('curr').siblings('.li-img').removeClass('curr');
n++;
}, 2000)
$('.li-img').click(function() {
var num = $(".li-img").index(this);
$(".a-img-ban").eq(num).addClass('img-ban-curr').siblings('.a-img-ban').removeClass(
'img-ban-curr');
$(this).addClass('curr').siblings(".li-img").removeClass('curr');
n = num;
});
});
</script>给大家看一眼效果图吧
效果图