该代码可以实现左右箭头点击切换，按钮点击切换，自动播放方面还需改进
点击切换方面算是实现了效果，自我感觉还需要改进，代码仅供参考
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/class.css">
</head>
<body>
<!-- 图片轮播 -->
<div class="picShow" id="picShow">
<!-- 内容部分 -->
<ul class="picUl" id="picUl">
<li><img src="images/squirrel.jpg" alt=""></li>
<li><img src="images/squir.jpg" alt=""></li>
<li><img src="images/watch.jpg" alt=""></li>
<li><img src="images/shoe.jpg" alt=""></li>
</ul>
<!-- 内容部分 end -->
<!-- 点 -->
<div class="dots" id="dots">
<span ><img src="images/squirrel1.jpg" alt=""></span>
<span> <img src="images/squir2.jpg" alt=""></span>
<span> <img src="images/watch3.jpg" alt=""></span>
<span> <img src="images/shoe4.jpg" alt=""></span>
</div>
<!-- 点 end -->
<!--箭头-->
<div class="arrows" id="arrows">
<span id="arrows_left" class="arrows_left"><</span>
<span id="arrows_right" class="arrows_right">></span>
</div>
<!--箭头 end-->
</div>
<!-- 图片轮播 end -->
<script src="js/class.js"></script>
</body>
</html>
CSS部分
/*public CSS*/
*{
margin: 0;
padding: 0;
}
ul,li,ol{
list-style: none;
}
img{
border:none;
}
/*public CSS end*/
.picShow{
width: 100%;
height: 100%;
margin: auto;
background: #ddd;
overflow: hidden; /* 内容超出隐藏 */
position: relative; /* 相对定位 */
}
.picUl{
/*width:9999px;*/
height: 500px;
transition:all 0.5s; /* 过渡动画 */
}
.picUl > li{
/*float: left;*/
width: 1200px;
height: 100%;
filter: opacity(1);
overflow: hidden; /* 内容超出隐藏 */
position: absolute; /*绝对定位，相互覆盖*/
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: none; /* 隐藏标签 */
}
.picUl > .showLi{
display: block;
/* 显示的时候才出现动画 */
animation: myAni 0.5s both;
}
@keyframes myAni {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.dots{
height: 89px;
right:38px;
bottom:35px;
position: absolute;
}
.dots span{
display: inline-block; /* 行内块。宽高有效 */
width: 81px;
height: 81px;
margin-right: 18px;
border: transparent solid 4px;
cursor: pointer; /* 指向的手势 */
}
.dots .on{
border: white solid 4px;
border-radius: 4px;
}
.arrows{
width:1400px;position: absolute;top:50%;margin-top: -60px;left: 50%;margin-left: -700px;/*opacity: 0;*/}
.arrows_left,.arrows_right{cursor: pointer;font-size: 100px; color: white;}
.arrows_right{float: right;}
.arrows_left{float: left;}
JS部分
{
let findSiblings = function( tag ){
let parent = tag.parentNode;
let childs = parent.children;
let sb = []; // 用来存储找到的兄弟们。
for( let i = 0 ; i <= childs.length-1; i++){
if( childs[i] !== tag ){
sb[ sb.length ] = childs[i];
}
}
return sb;
};
let arrows_left = document.getElementById("arrows_left");
let arrows_right = document.getElementById("arrows_right");
let picShow = document.getElementById("picShow");
let arrows = document.getElementById("arrows");
let lunboFun = function(d,p){
let dots = document.getElementById(d);
let picUl = document.getElementById(p);
let spans = dots.children;
let lis = picUl.children ;
let t=0;
lis[t].className = "showLi";//初始化第一张图片
spans[t].className ="on";//初始化第一张按钮图片
/*自动播放*/
/* let show = function(){
t++;
if (t>3)
{
t=0;
}
lis[t].className = "showLi";
let liXd = findSiblings( lis[t] );
for(let k = 0 ; k <=liXd.length-1 ; k++){
liXd[k].className = "";
}
spans[t].className = "on";
let xd = findSiblings( spans[t] );
for(let j = 0 ; j <=xd.length-1 ; j++){
xd[j].className = "";
}
};
let a = setInterval(function () {
show();
},1000);
picShow.addEventListener("mouseenter",function () {
arrows.style.opacity = 1;
clearInterval(a)
});
picShow.addEventListener("mouseleave",function () {
arrows.style.opacity = 0;
a = setInterval(function () {
show();
},1000);
});*/
/*自动播放 end*/
let lr =function(a){//左右点击函数
//右
arrows_right.addEventListener("click", function () {
a++;
if (a>3)
{
a=0;
}
lis[a].className = "showLi";
let liXd = findSiblings( lis[a] );
for(let k = 0 ; k <=liXd.length-1 ; k++){
liXd[k].className = "";
}
spans[a].className = "on";
let xd = findSiblings( spans[a] );
for(let j = 0 ; j <=xd.length-1 ; j++){
xd[j].className = "";
}
});
//左
arrows_left.addEventListener("click", function () {
a--;
if (a<0)
{
a=3;
}
lis[a].className = "showLi";
let liXd = findSiblings( lis[a] );
for(let k = 0 ; k <=liXd.length-1 ; k++){
liXd[k].className = "";
}
spans[a].className = "on";
let xd = findSiblings( spans[a] );
for(let j = 0 ; j <=xd.length-1 ; j++){
xd[j].className = "";
}
});
};
lr(t);//在外面调用左右点击函数
for(let i=0 ; i <= spans.length-1 ; i++){//图片点击按钮
spans[i].addEventListener("click",function(){
console.info( i ); // 索引
lr(i);//点击图片后调用左右点击函数
lis[i].className = "showLi";
let liXd = findSiblings( lis[i] );
for(let k = 0 ; k <=liXd.length-1 ; k++){
liXd[k].className = "";
}
this.className = "on";
let xd = findSiblings( this );
for(let j = 0 ; j <=xd.length-1 ; j++){
xd[j].className = "";
}
console.info( xd );
});
}
};
lunboFun("dots","picUl");
}