版权声明：一入前端深似海，想好了再往下看~~QQ：648050824~~邮箱：[email protected] https://blog.csdn.net/qq_42690547/article/details/85863107
见解请评论
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0px;
padding: 0px;
}
#wrap{
width: 500px;
height: 500px;
border:1px solid #000;
overflow: hidden;
position: relative;
}
ul{
position: absolute;
}
ul li{
list-style: none;
float: left;
width: 500px;
height: 500px;
}
img{
width: 500px;
height: 500px;
}
span{
display: block;
width: 60px;
height: 100px;
position: absolute;
background: red;
z-index: 1;
color:#ffff;
cursor: pointer;
font-size: 74px;
text-align: center;
line-height: 100px;
}
span:nth-of-type(1){
left: 430px;
top:200px;
}
span:nth-of-type(2){
top:200px;
}
#ul2{
position: absolute;
left: 150px;
bottom: 10px;
}
#ul2 li{
list-style: none;
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background: yellow;
border-radius: 50%;
margin-right: 10px;
cursor: pointer;
}
#ul2 .li{
background: blue;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="ul">
<li><img src="../img/1.jpg" alt=""></li>
<li><img src="../img/2.jpg" alt=""></li>
<li><img src="../img/3.jpg" alt=""></li>
<li><img src="../img/1.jpg" alt=""></li>
</ul>
<span>></span>
<span><</span>
<ul id="ul2">
<li class="li">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
<script src="../js/startMove.js"></script>
<script src="../js/es6-lunbo.js"></script>
<script>
// var a = new lunbo();
var oWrap = document.getElementById("wrap");
var oUl = document.getElementById("ul");
var oLi = document.getElementsByTagName("li");
var oSpan = document.getElementsByTagName("span");
var oul = document.getElementById("ul2");
var oli= oul.children;
console.log(oul);
var x =oLi[0].offsetWidth;
oUl.style.width=x*oLi.length+"px";
oUl.style.height=500+"px";
var i=0;
//给三个圆设置单击事件
for( let j=0;j<oli.length;j++){
oli[j].onclick=function () {
// oUl.style.left=j*x+"px";
startMove(oUl,{left:-j*x});
for( var y=0;y<oli.length;y++){
oli[y].className="";
}
oli[j].className="li";
i=j;
}
}
//页面加载之后自动轮播
oWrap.timer=setInterval(function () {
i++;
if(i==4){
oUl.style.left=0+"px";
i=1;
}
for( var j=0;j<oli.length;j++){
oli[j].className="";
}
if(i==3){
oli[0].className="li";
}
else {
oli[i].className="li";
}
startMove(oUl,{left:-i*x});
},1000);
//左右箭头
oSpan[0].onclick=function () {
i++;
if(i==4){
oUl.style.left=0+"px";
i=1;
}
for( var j=0;j<oli.length;j++){
oli[j].className="";
}
if(i==3){
oli[0].className="li";
}
else {
oli[i].className="li";
}
startMove(oUl,{left:-i*x});
};
oSpan[1].onclick=function(){
i--;
if(i==-1){
oUl.style.left=-1500+"px";
i=2;
}
for( var j=0;j<oli.length;j++){
oli[j].className="";
}
if(i==3){
oli[0].className="li";
}
else {
oli[i].className="li";
}
startMove(oUl,{left:-i*x});
};
//划上时暂停
oWrap.onmouseover=function () {
clearInterval(oWrap.timer);
}
oWrap.onmouseout = function () {
oWrap.timer=setInterval(function () {
i++;
if(i==4){
oUl.style.left=0+"px";
i=1;
}
for( var j=0;j<oli.length;j++){
oli[j].className="";
}
if(i==3){
oli[0].className="li";
}
else {
oli[i].className="li";
}
startMove(oUl,{left:-i*x});
},1000)
}
</script>
</html>