项目结构如图：
images文件放有几个图片
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认样式 */
body,ul{
margin: 0;
}
ul{
padding-left: 0;
list-style: none;
}
.content{
position: relative;
width: 1200px;
height: 336px;
margin: 80px auto 0;
}
.imglist{
width: 1200px;
height: 336px;
}
.btnleft,.btnright{
position: absolute;
top: 50%;
z-index: 10;
margin-top: -25px;
width: 50px;
height: 50px;
background-color:rgba(0, 0, 0, 0.7);
font-size: 22px;
text-align: center;
line-height: 50px;
}
.btnleft{
left: 0;
}
.btnright{
right: 0;
}
.imglist>ul{
position: relative;
overflow: hidden;
/* 超出的部分隐藏掉 */
width: 100%;
height: 100%;
}
.imglist>ul>li{
position: absolute;
width: 730px;
height: 336px;
transition: 0.5s;
/*轮播图变化的时间间隔 */
}
.line{
width: 1200px;
height: 31px;
text-align: center;
}
.list1{
z-index: 1;
transform: scale(0.81);
transform-origin: 0% 100%;
/* 向左下角缩 */
}
.list2{
z-index: 2;
transform: translateX(235px) ;
}
.list3{
z-index: 1;
transform: translateX(730px) scale(0.81);
transform-origin: 100% 100%;
/* 以右下角为中心缩 */
}
.list4{
transform: translateX(965px) scale(0.81);
transform-origin: 100% 100%;
/* 以右下角为中心缩 */
}
.list5{
transform: translateX(1200px) scale(0.81);
transform-origin: 100% 100%;
/* 以右下角为中心缩 */
}
.list6{
transform: translateX(1435px) scale(0.81);
transform-origin: 100% 100%;
/* 以右下角为中心缩 */
}
.line>span{
display: inline-block;
width: 35px;
height: 3px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="content">
<div class="imglist">
<ul>
<li class="list1"><img src="images/1.png" alt="" ></li>
<li class="list2"><img src="images/2.png" alt="" ></li>
<li class="list3"><img src="images/3.png" alt="" ></li>
<li class="list4"><img src="images/4.png" alt="" ></li>
<li class="list5"><img src="images/5.png" alt="" ></li>
<li class="list6"><img src="images/6.png" alt="" ></li>
</ul>
</div>
<div class="line">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="btnleft"><</div>
<div class="btnright">></div>
</div>
<script>
var index = 0;
var aSpan = document.querySelectorAll("span");//获取所有span元素
function setLineColor(){
for(var i = 0; i<aSpan.length; i=i+1){
//先对每一个span都设置成灰色
aSpan[i].style.backgroundColor="#ccc";
}
aSpan[index].style.backgroundColor="#45c17c";
//根据当前index值所指向的按钮的span设定绿色
}
setLineColor();
var aLiName=["list1","list2","list3","list4","list5","list6"];
var aLi = document.querySelectorAll("li");
function nextPic(){
//把名字的顺序掉各个，把最后一个名字塞到第一的位置中
aLiName.unshift(aLiName[5]);
aLiName.pop();//删除最后一个值
for (var i = 0; i<aLi.length; i++){
//重新给每个li设置一个名字
aLi[i].setAttribute("class",aLiName[i]);
}
index++;//点亮下一个
if(index > 5){index = 0;}
setLineColor();//重新设置按钮的颜色
}
var btnright = document.querySelector(".btnright");//注意，这里是类选择器
btnright.onclick=nextPic;//右按钮点击的时候向下翻页
function LastPic(){
aLiName.push(aLiName[0]);//向数组的末尾添加数组第一个元素
aLiName.shift(aLiName[0]);//删除第一个值
for (var i = 0; i<aLi.length; i++){
//重新给每个li设置一个名字
aLi[i].setAttribute("class",aLiName[i]);
}
index--;//点亮下一个
if(index < 0){index = 5;}
setLineColor();//重新设置按钮的颜色
}
var btnleft = document.querySelector(".btnleft");//注意，这里是类选择器
btnleft.onclick=LastPic;//右按钮点击的时候向下翻页
function settime(){
setInterval(nextPic,2000);
}
settime();
</script>
</body>
</html>效果展示：
