- 轮播图最终效果展示
2.轮播图的布局思想
一个主体盒子中包含六个等高等宽的盒子,为了后序轮播的效果,最后一个盒子的颜色要跟第一个盒子一样。
布局样式代码
.slider-list {
display: flex;
position: relative;
left: 0px;
width: 100%;
height: 100%;
transition: all 1s;
}
.slider-list li {
flex-shrink: 0;
width: 680px;
height: 340px;
}
<ul class="slider-list">
<!-- <li><a href="#"><img src="./img/5.jpg"></a></li> -->
<li style="background: #453a94">1</li>
<li style="background: #fff1eb">2</li>
<li style="background: #4facfe">3</li>
<li style="background: #96e6a1">4</li>
<li style="background: #fda085">5</li>
<li style="background: #a18cd1">6</li>
</ul>
3.实现轮播效果
轮播思路是li距离左侧的距离为负数并且这个负数值为li的总宽度时则可以展示下一个li,这个过程中加上我们的transition就可以实现轮播效果,展示那个li时就用这个li的下标乘以总宽度。
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
获取我们做外层的主体盒子,
通过getElementsByTagName获取我们的ul列表的第一个下标0,
获取我们的六个色块li
var slid = document.getElementById("slider");
var slidLis = slid.getElementsByTagName("ul")[0];
// var slidLis=document.querySelector(".slider-list")
var slidLi = slidLis.getElementsByTagName("li");
var index = 0;
实现我们的自动轮播,封装一个函数,利用index++来让我们li距离左侧ul的距离进行变化,并且给ul,添加过渡效果,通过我们的index,来判断我们的色块是否为最后一个,若为最后一个则将index重新赋值为0,并利用计时器将li距离左侧ul的距离清零将过渡效果清除
function lun() {
index++;
circe();
slidLis.style.left = index * -680 + "px";
slidLis.style.transition = "all 1s";
if (index === 5) {
index = 0;
setTimeout(function () {
slidLis.style.left = 0;
slidLis.style.transition = "none";
}, 1000);
}
circe();
}
通过给我们的最外层的盒子添加鼠标移入移出事件,来进行自动轮播的效果,
mouseenter:当鼠标指针穿过(进入)被选元素时,会发生 mouseenter 事件。
mouseleave:当鼠标指针离开被选元素时,会发生 mouseleave 事件
// 自动轮播
var autoplay = setInterval(lun, 2000);
slid.addEventListener("mouseenter", function () {
clearInterval(autoplay);
});
slid.addEventListener("mouseleave", function () {
clearInterval;
autoplay = setInterval(lun, 2000);
});
4.焦点同步轮播
焦点布局,利用绝对定位将焦点定位到主体盒子中间,
定义一个cur样式
.dot-list {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
padding: 2px 10px;
border-radius: 12px;
border-color: rgba(255, 255, 255, 0.3);
}
.dot-list .dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: white;
}
.dot-list .dot.cur {
background-color: red;
}
给焦点添加一个cur样式,默认第一个。
<!-- 小点部分 -->
<div class="dot-list">
<span class="dot cur"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
创建一个函数,循环我们焦点的长度,当轮播的下标index等于焦点的下标时,为这个焦点添加class样式cur,反则删除这个样式,将我们的这个函数放到我们的轮播图函数中进行调用
//小圆点
var dotList = document.getElementsByTagName("span");
function circe() {
for (var i = 0; i < dotList.length; i++) {
if (i === index) {
dotList[i].classList.add("cur");
} else {
dotList[i].classList.remove("cur");
}
}
}
5.左右按钮
左右按钮的样式
利用定位到左右两侧
样式可自行调控
样式
.arraw {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.795);
display: none;
}
.prev {
left: 0;
}
.next {
right: 0;
}
.arraw span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(50%, 50%);
width: 10px;
height: 10px;
border-bottom: 2px solid white;
border-left: 2px solid white;
}
.prev span {
transform: translate(-50%, -50%) rotate(45deg);
}
.next span {
transform: translate(-50%, -50%) rotate(-135deg);
}
#slider:hover .arraw {
display: block;
}
布局
<!--箭头布分 -->
<a href="#" class="arraw prev" id="left">
<span></span>
</a>
<a href="#" class="arraw next" id="right">
<span></span>
</a>
给我们的左侧按钮添加点击事件,当点击的时候调用一下轮播函数即可。
点击右侧按钮时,让我们的index自减,判断index是否为-1为负一是则证明左侧已经没有色块,则跳到我们最后的一个色块,将li距离ul左侧的距离进行调整,并且将过渡效果给关了,
反之则将li距离ul左侧的距离重新计算利用自减后的index。
var lef = document.getElementById("left");
var righ = document.getElementById("right");
righ.addEventListener("click", lun);
lef.addEventListener("click", function () {
index--;
if (index === -1) {
slidLis.style.left = 5 * -680 + "px";
slidLis.style.transition = "none";
index = 4;
setTimeout(function () {
slidLis.style.left = index * -680 + "px";
slidLis.style.transition = "all 1s";
}, 0);
} else {
slidLis.style.left = index * -680 + "px";
}
circe();
});