之前学了一个简易轮播图功能，接下来我们来实现无缝连接轮播图功能的实现？我们在上一章的基础加以改进，可以提高写作速度，有助于巩固前一章轮播图功能实现思想和技术。
HTML代码：
<div class="carousel"> <div class="carousel-list"> <div class="item"><a href=""><img src="./img/1.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./img/2.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./img/3.jpg" alt=""></a></div> <div class="item"><a href=""><img src="./img/4.jpg" alt=""></a></div> </div> <div class="carousel-arrow carousel-arrow-left"><</div> <div class="carousel-arrow carousel-arrow-right">></div> <div class="indicator"> <span class="active"></span> <span></span> <span></span> </div> </div>
CSS代码：
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.carousel{
width: 368px;
height: 401px;
margin: 10px auto;
overflow: hidden;/*重点 2 走马灯区域一次只能显示一张图片我们在这里设置overflow:hidden 这样其他图片就看不到了*/
position: relative;/*相对定位*/
border: 4px solid red;
}
/* 走马灯区域carousel */
.carousel-list{
width: 100%;
height: 100%;
display:flex;/*重点 1 走马灯区域是横向排列的这里我们用到弹性盒子*/
transition: 0.5s;/*区域性的变化会在0.5秒钟没改变*/
}
.carousel .carousel-list img{
width: 360px;
height: 393px;
text-align: center;
}
.carousel-arrow-left{
width: 50px;
height: 50px;
position: absolute;
bottom: 50%;
left: 10%;
border: 1px solid blueviolet;
border-radius: 50%;
background-color: blueviolet;
color: white;
text-align: center;
vertical-align: middle;
transition: 0.5s;
opacity: 0.6;
}
.carousel-arrow-left:hover{
border: 1px solid black;
background-color: black;
}
.carousel-arrow-right{
width: 50px;
height: 50px;
position: absolute;
bottom: 50%;
right: 10%;
border: 1px solid blueviolet;
border-radius: 50%;
background-color: blueviolet;
color: white;
text-align: center;
vertical-align: middle;
transition: 0.5s;
opacity: 0.6;
}
.carousel-arrow-right:hover{
border: 1px solid black;
background-color: black;
}
/*指示区域*/
.indicator{
position: absolute;/*绝对定位，按照子绝父相*/
bottom: 10px;
display: flex;/*因为是横向布局就要用到弹性盒子display:flex*/
left: 50%;
transform:translateX(-50%);/*向左移动自身宽度的一半*/
}
.indicator span{
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 50%;
margin: 0px 3px;
}
.indicator span.active{background-color: white;border-color: white;}JavaScript代码：
<script>
var doms = {
carouselList:document.querySelector('.carousel-list'),
arrowLeft:document.querySelector('.carousel-arrow-left'),
arrowRight:document.querySelector('.carousel-arrow-right'),
indicators:document.querySelectorAll('.indicator span'),
}
var curIndex = 0;//记录目前是第几张图
function moveTo(index){
doms.carouselList.style.transform = `translateX(-${index}00%)`;/*-${index}00% 用到es6的魔法拼接*/
doms.carouselList.style.transition = '.5s';
// 或
// doms.carousel.style.transform = `translateX(-${index * 100}%)`;
// 指示器分成两部来完成？
//1.去除当前选中的指示器
var active =document.querySelector('.indicator span.active');//获取当前选中的指示器，
//然后把他的类样式，classList去除掉active用remove
active.classList.remove('active');
//2.重新设置要选中的指示器
doms.indicators[index].classList.add('active');
curIndex = index;
}
doms.indicators.forEach(function(item,i){
item.onclick = function(){
moveTo(i);
}
});
function init(){
//复制第一张图
var first = doms.carouselList.firstElementChild.cloneNode(true);
//复制最后张图
var last = doms.carouselList.lastElementChild.cloneNode(true);
//将第一张图放到末尾
doms.carouselList.appendChild(first);
//将最后一张图放到最前
doms.carouselList.insertBefore(last,doms.carouselList.firstElementChild);
//设置最后一张复制图为绝对定位
last.style.position = 'absolute';
last.style.transform = 'translateX(-100%)';
}
init();
function leftNext(){
if(curIndex === 0){
doms.carouselList.style.transform = 'translateX(100%)';
doms.carouselList.style.transition = 'none';
//强制渲染。浏览器渲染原理：只要你去读取元素的尺寸位置，就会导致浏览器的回流，这一会留就导致重新渲染。
doms.carouselList.clientHeight;//读取浏览器的高度，主要是为了读取它的尺寸，导致浏览器强制渲染。
moveTo(count - 1);
//console.log('无缝');
}else{
moveTo(curIndex - 1)
}
}
var count = doms.indicators.length;
function rightNext(){
if(curIndex === count - 1){
doms.carouselList.style.transform = 'translateX(100%)';
doms.carouselList.style.transition = 'none';
//强制渲染。浏览器渲染原理：只要你去读取元素的尺寸位置，就会导致浏览器的回流，这一会留就导致重新渲染。
doms.carouselList.clientHeight;//读取浏览器的高度，主要是为了读取它的尺寸，导致浏览器强制渲染。
moveTo(0);
//console.log('无缝');
}else{
moveTo(curIndex + 1)
}
}
doms.arrowLeft.onclick = leftNext;
doms.arrowRight.onclick = rightNext;
</script>这样我们就完成了无缝连接焦点图了，虽然还有一些缺点，我们要是加入定时滚动机制就完美了。
蒙公网安备 15078402000155号