刚开始接触前端时，页面需要轮播。奈何基础太差只能写出简易且土的轮播效果，这里记录下实现效果。
一.愣头愣脑的轮播效果。
1.HTML结构代码块
<div class="carousel-box">
<!-- 图片切换 -->
<img src="images/1.jpeg" id="carousel-img">
<!--左右切换-->
<div id="arrow-left"><img src="images/arrow-left-bold.png"></div>
<div id="arrow-right"><img src="images/arrow-right-bold.png"></div>
<!--标识切换-->
<div id="carousel-list"></div>
</div>
2.css样式代码块
.carousel-box {
position: relative;
width: 800px;
height: 500px;
margin: 50px auto;
background-color: #A3AABA;
}
#arrow-left,#arrow-right{
position: absolute;
top: 50%;
transform:translateY(-50%);
width: 80px;
height: auto;
cursor: pointer;
}
#arrow-left{
left:20px;
}
#arrow-right{
right: 20px;
}
#arrow-left>img,#arrow-right>img{
width: 100%;
height: auto;
display: block;
}
#carousel-list{
position:absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
display: flex;
}
.dot-list{
display: block;
width:10px;
height: 10px;
border-radius: 50%;
margin:0 5px;
cursor: pointer;
}
.dot-list-active{
background-color:darkblue;
}
.dot-list-default{
background-color:#555555;
}
3.js代码块
//封装id
function $(id) {
return typeof(id) === "string" ? document.getElementById(id) : id;
}
//自定义变量
let carouselImgArray = ['images/1.jpeg', 'images/2.jpeg', 'images/3.jpeg','images/4.jpeg'],//存储图片所在位置
carouselImgArrayLen=carouselImgArray.length,
carouselIndex = 0,
carouselTime = null;
//根据图片数量动态加入下标
for(let j=0;j<carouselImgArrayLen;j++){
let carouselSpan=document.createElement("span");//创建元素
$("carousel-list").append(carouselSpan);//加入DOM树中
$("carousel-list").getElementsByTagName("span")[j].className="dot-list dot-list-default"//加入初始class样式
}
//获取轮播下标
let dotList=$("carousel-list").getElementsByClassName("dot-list")
//设置默认第一个下标的选中样式
dotList[0].classList.remove("dot-list-default")
dotList[0].classList.add("dot-list-active")
//自动轮播方法
function handleCarouselPlay(){
carouselTime=setInterval(function(){
handleCarouselLogic()
},6000)
}
//隔6秒 累加carouselIndex
function handleCarouselLogic(){
carouselIndex++
if(carouselIndex>carouselImgArrayLen-1){
carouselIndex=0
}
//调用轮播下标样式方法
handleChangeStyle()
//替换原来的图片路径
$("carousel-img").src=carouselImgArray[carouselIndex]
}
//根据carouselIndex变量，选中对应下标
function handleChangeStyle(){
for (let i = 0; i < dotList.length; i++) {
dotList[i].className = "dot-list dot-list-default"
}
dotList[carouselIndex].className = "dot-list dot-list-active"
}
//下一张的点击事件
$("arrow-right").addEventListener("click",function(){
handleCarouselLogic()
})
//上一张的点击事件
$("arrow-left").addEventListener("click",function(){
carouselIndex--
if(carouselIndex<0){
carouselIndex=carouselImgArray.length-1
}
//调用轮播下标样式方法
handleChangeStyle()
//替换原来的图片路径
$("carousel-img").src=carouselImgArray[carouselIndex]
})
//点击轮播下标时，进行图片切换
for(let n=0;n<dotList.length;n++){
dotList[n].addEventListener("click",function(){
carouselIndex=n
//调用轮播下标样式方法
handleChangeStyle()
$("carousel-img").src=carouselImgArray[carouselIndex]
})
}
//调用自动轮播播放方法
handleCarouselPlay()
一个简易且土气的轮播就完成了,思路就是动态的替换img中src的属性实现轮播效果。
二.愣头愣脑，略有层次的轮播效果。
1.HTML结构代码块
<div class="carousel">
<div id="carousel-box">
<div class="carousel-list carousel-list-reduce"><img src="images/1.jpeg"></div>
<div class="carousel-list carousel-list-normality"><img src="images/2.jpeg"></div>
<div class="carousel-list carousel-list-reduce"><img src="images/3.jpeg"></div>
<div class="carousel-list carousel-list-reduce"><img src="images/4.jpeg"></div>
</div>
<div id="arrow-left"><img src="images/arrow-left-bold.png"></div>
<div id="arrow-right"><img src="images/arrow-right-bold.png"></div>
</div>
2.css样式代码块
.carousel{
position: relative;
width: 800px;
height:360px;
margin:40px auto;
background-color: #000;
overflow: hidden;
}
#carousel-box{
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
display: flex;
align-items: center;
height:500px;
border: #555555;
overflow: hidden;
}
.carousel-list{
width:400px;
height: auto;
}
.carousel-list-reduce {
transform: scale(0.5);
}
.carousel-list-normality {
transform: scale(1);
}
.carousel-list>img{
width: 100%;
height: auto;
display: block;
}
#arrow-left,#arrow-right{
position: absolute;
top: 50%;
transform: translateY(-50%);
width:60px;
height: auto;
cursor: pointer;
}
#arrow-left{
left: 100px;
}
#arrow-right{
right: 100px;
}
#arrow-left>img,#arrow-right>img{
width: 100%;
height: auto;
display: block;
}
3.js代码块
//封装成id
function $(id){
return typeof(id)==="string"?document.getElementById(id):id
}
let carouselLists=$("carousel-box").getElementsByClassName("carousel-list"),
carouselBoxtWidth=0,//定义轮播整体的宽度
carouselListWidth = carouselLists[0].offsetWidth,//获取单个图片的宽度
carouselListHalfWidth = (carouselListWidth / 2),// 获取图片一半的宽度
carouselIndex = 1,
distance=0;//位移距离
//根据图片的数量，赋予整体盒子宽度
for(let i=0;i<carouselLists.length;i++){
carouselBoxtWidth+=carouselLists[i].offsetWidth;
}
//计算初始位移距离,大图片居中，小图片两边对其
$("carousel-box").style.transform="translate("+ -carouselListHalfWidth +"px,-50%)";
//下一张图片点击事件
$("arrow-left").addEventListener("click",function(){
carouselIndex--
if(carouselIndex<0){
carouselIndex=0
return
}
//获取当前张数的宽度 这里是累减
distance-=carouselLists[carouselIndex].offsetWidth;
//调用图片未选中样式状态，缩小0.5
handleStyleDefault()
//设置图片选中时样式
carouselLists[carouselIndex].className="carousel-list carousel-list-normality"
//设置整体向左位移当前位移宽度加上图片一半的宽度
$("carousel-box").style.transform="translate("+ -(distance+carouselListHalfWidth) +"px,-50%)";
})
//上一张图片点击事件
$("arrow-right").addEventListener("click",function(){
carouselIndex++
if (carouselIndex > carouselLists.length-1) {
carouselIndex=carouselLists.length-1
return
}
//调用图片未选中样式状态，缩小0.5
handleStyleDefault()
//获取当前张数的宽度 这里是累加
distance+=carouselLists[carouselIndex].offsetWidth;
//设置图片选中时样式
carouselLists[carouselIndex].className="carousel-list carousel-list-normality"
//设置整体向左位移当前位移宽度加上图片一半的宽度
$("carousel-box").style.transform="translate("+ -(distance+carouselListHalfWidth) +"px,-50%)";
})
//图片没有选中时的样式
function handleStyleDefault(){
for (let i = 0; i < carouselLists.length; i++) {
carouselLists[i].className="carousel-list carousel-list-reduce"
}
}
又一个简易且土气的轮播就完成了,思路就是通过改变整体的位移实现轮播效果。
注意：如果全屏展示时出现两边小图没有对称，右边的小图靠左边点，需要计算插值。
let clienWidthBody = document.body.clientWidth; //获取浏览器宽 1903 let carouselBoxtWidth=0; //定义轮播整体的宽度 let carouselListWidth = carouselLists[0].offsetWidth; //获取单个图片的宽度 let carouselListHalfWidth = (carouselListWidth / 2); // 获取图片一半的宽度 let discrepancy = clienWidthBody - carouselListHalfWidth - carouselListHalfWidth; //获取第二个小图的值
let discrepancyNumber = (discrepancy - carouselListWidth) / 2; //如果discrepancy的值比carouselListWidth单个图片的宽度的值大，进行相减，再除2
let initWidth = -(carouselListWidth - discrepancyNumber) //单个图片宽度减去插值，差不多两边对齐了。
$("carousel-box").style.transform = "translateX(" + initWidth + "px)";
后面还会记录其他简易且土气的轮播图， 希望以后能写出优雅，炫酷的轮播。
若有不对的地方请指正，有优化的方法请大佬们提点。
