大家好 我是板砖 今天给大家分享一下我自己做的竖屏轮播图 这个轮播图老好用了 这个demo是适配的，话不多说 上代码：
html：
<div id="banner" class="echarts_one" style="overflow: hidden;position: relative;"> <div class="banner_list"> <img src="第1张图片路径" alt="" /> <img src="第2张图片路径" alt="" /> <img src="第3张图片路径" alt="" /> <img src="第4张图片路径" alt="" /> <img src="第1张图片路径" alt="" /> </div> <!-- 轮播图的小圆点 --> <div class="round"></div> </div>
css:
.echarts_one { width: 100%; height: calc(100% - 30px); } .banner_list { width: 100%; display: flex; flex-direction: column; /* margin-top: -328px; */ } .round { display: flex; flex-direction: column; align-items: flex-end; position: absolute; justify-content: space-around; top: 100px; right: 0; width: 10px; height: 100px; } .round span { width: 3px; height: 10px; background-color: #bfc0c1; border-radius: 5px; }
js:
let times = setInterval(banner, 3000); function banner() { index++; //轮播图渲染 let banner = document.getElementById('banner'); let imgHidth = banner.offsetHeight; let round = document.getElementsByClassName('round')[0]; $('.banner_list').css('height', (data.teacher.length + 1) * banner.offsetHeight); $('.banner_list').children().css('height', banner.offsetHeight); // console.log($('.banner_list').height()); // console.log($('.banner_list').children()); $('.banner_list').css('margin-top', -index * imgHidth + 'px').css('transition', 'all 0.5s'); if (index == $('.banner_list').children().length - 1) { setTimeout(function() { index = 0; $('.banner_list').css('transition', '').css('margin-top', '0px'); }, 500); round.children[0].style.backgroundColor = '#515151'; round.children[$('.banner_list').children().length - 2].style.backgroundColor = '#bfc0c1'; } else { round.children[index].style.backgroundColor = '#515151'; round.children[index - 1].style.backgroundColor = '#bfc0c1'; } }
