<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
padding: 0px;
margin: 0px;
}
li{
list-style-type: none;
}
.all{
border-radius: 20px;
margin: 100px auto auto auto;
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
}
.list{
display: flex;
position: relative;
transition: all 2s;
left: -2400px;
width: 100%;
height: 100%;
}
.item img, .item{
width: 600px;
height: 400px;
}
.dot{
display: flex;
position: absolute;
width: 100px;
height: 15px;
left: 250px;
bottom: 20px;
justify-content: space-between;
}
.point{
width: 9px;
height: 9px;
border-radius: 50%;
background-color: white;
cursor: pointer;
line-height: 15px;
}
.active{
width: 12px;
height: 12px;
border-radius: 50%;
background-color: gray;
cursor: pointer;
line-height: 15px;
}
.bnt{
width: 30px;
height: 60px;
font-size: 30px;
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
text-decoration: none;
color: white;
top: 50%;
transform: translateY(-50%);
line-height: 60px;
text-align: center;
}
.bntleft{
border-radius: 0px 30px 30px 0px;
left: 0px;
padding-right: 5px;
}
.bntright{
border-radius: 30px 0px 0px 30px;
right: 0px;
padding-left: 5px;
}
</style>
<body>
<div class="all" id="all">
<ul class="list" id="list">
<li class="item" ><img src="images/1.jpg" alt=""></li>
<li class="item" ><img src="images/2.jpg" alt=""></li>
<li class="item" ><img src="images/3.jpg" alt=""></li>
<li class="item" ><img src="images/4.jpg" alt=""></li>
</ul>
<ul class="dot" id="dot">
<li class="point active"></li>
<li class="point"></li>
<li class="point"></li>
<li class="point"></li>
</ul>
<a class="bnt bntleft" href="#" id="bntleft"><</a>
<a class="bnt bntright" style="order: 1;" href="#" id="bntright">></a>
</div>
<script>
let items=document.querySelector(".list")
let points=document.querySelectorAll(".point")
let left=document.getElementById("bntleft")
let right=document.getElementById("bntright")
let stop=document.getElementById("all")
let a=4
let b=0
items.innerHTML+=items.innerHTML
function pointchange(){
if(a==0||a==4){
b=0
}
if(a==1||a==5){
b=1
}
if(a==2||a==6){
b=2
}
if(a==3||a==7){
b=3
}
document.querySelector(".active").classList.remove("active")
points[b].classList.add("active")
}
function lun(){
a++
items.style.transition="all 2s"
if(a==8){
a=4
items.style.transition="all 0s"
items.style.left=-2400
}
items.style.left=a*-600+"px"
pointchange()
}
function _lun(){
a--
items.style.transition="all 2s"
if(a==-1){
a=3
items.style.transition="all 0s"
items.style.left=1800
}
items.style.left=a*-600+"px"
pointchange()
}
function point1(){
if(a<4){
a=0
}
else{
a=4
}
document.querySelector(".active").classList.remove("active")
points[0].classList.add("active")
items.style.transition="all 2s"
items.style.left=a*-600+"px"
}
function point2(){
if(a<4){
a=1
}
else{
a=5
}
document.querySelector(".active").classList.remove("active")
points[1].classList.add("active")
items.style.transition="all 2s"
items.style.left=a*-600+"px"
}
function point3(){
if(a<4){
a=2
}
else{
a=6
}
document.querySelector(".active").classList.remove("active")
points[2].classList.add("active")
items.style.transition="all 2s"
items.style.left=a*-600+"px"
}
function point4(){
if(a<4){
a=3
}
else{
a=7
}
document.querySelector(".active").classList.remove("active")
points[3].classList.add("active")
items.style.transition="all 2s"
items.style.left=a*-600+"px"
}
points[0].addEventListener("click", point1)
points[1].addEventListener("click", point2)
points[2].addEventListener("click", point3)
points[3].addEventListener("click", point4)
right.addEventListener("click",lun)
left.addEventListener("click",_lun)
let auto=setInterval(lun,2000)
stop.addEventListener("mouseenter",function(){
clearInterval(auto)
})
stop.addEventListener("mouseleave",function(){
clearInterval;
auto=setInterval(lun,2000)
})
</script>
</body>
</html>
轮播图.zip
需积分: 0 186 浏览量
2023-12-27
16:51:29
上传
评论
收藏 8.51MB ZIP 举报
轮播图.zip （5个子文件） 
轮播图 
index.html 6KB images 
2.jpg 1.54MB 1.jpg 2.12MB 3.jpg 1.9MB 4.jpg 3.24MB资源评论
wp2197859823
- 粉丝: 0
- 资源: 1
