这是一个轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#main{
width: 700px;
height: 300px;
position: relative;
overflow: hidden;
cursor: pointer;
}
.box{
height: 100%;
width: 100%;
}
.item{
width: 100%;
height: 100%;
z-index: 1;
text-align: center;
position: absolute;
/* transition: 1s; */
}
.trans{
transition: 1s;
}
#left{
width: 50px;
height: 50px;
background-color: rgba(0,0,0,.3);
border-radius: 25px;
z-index: 2;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
transition: .3s;
opacity: 0;
}
#right{
width: 50px;
height: 50px;
background-color: rgba(0,0,0,.3);
border-radius: 25px;
z-index: 2;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
transition: .3s;
opacity: 0;
}
#page{
position: absolute;
z-index: 2;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
transition: .3s;
background: auto;
opacity: 0;
}
</style>
</head>
<body>
<div id="main">
<div class="box">
<div class="item trans" style="background-color: antiquewhite;"></div>
<div class="item trans" style="background-color: aquamarine;"></div>
<div class="item trans" style="background-color: brown;"></div>
<div class="item trans" style="background-color: cadetblue;"></div>
<div class="item trans" style="background-color: cornflowerblue;"></div>
<div class="item trans" style="background-color: darkgrey;"></div>
</div>
<div id="left"></div>
<div id="right"></div>
<div id="page"></div>
</div>
<script type="text/javascript">
let items = document.querySelectorAll('.item'); // 获取全部要轮播的元素
let page = document.getElementById('page'); // 下方白点的盒子
let time = 3000 // 计时器切换的cd
let Interval = setInterval(()=>{ // 计时器
i++
a()
},time)
let i = items.length*100 // 轮播数据
items.forEach((item,index)=>{ // 生成白点
let div = document.createElement('div')
div.className = 'page-item'
div.style.width = '5px'
div.style.height = '5px'
div.style.margin = '0 5px'
div.style.borderRadius = '3px'
div.style.border = '1px solid #fff'
div.style.float = 'left'
// div.onclick = function(){
// if(i%items.length !== index){
// console.log(index)
// i = i+(index-i%items.length)
// a()
// }
// }
page.appendChild(div)
})
let pageItems = document.querySelectorAll('.page-item'); // 所有白点
a()
function a(){ // 切换的方法
pageItems.forEach(item => {
item.style.background = ''
})
pageItems[i%items.length].style.background = '#fff'
items.forEach((item,index)=>{
if(index == i%items.length-1){
item.style.display = 'block'
item.style.top = '0'
item.style.left = '-700px'
}else if(index == i%items.length){
item.style.display = 'block'
item.style.top = '0'
item.style.left = '0'
}else if(index == i%items.length+1){
item.style.display = 'block'
item.style.top = '0'
item.style.left = '700px'
}else{
item.style.display = 'none'
}
})
if(i%items.length == items.length-1){
items[0].style.top = '0'
items[0].style.left = '700px'
items[0].style.display = 'block'
}
if(i%items.length == 0){
items[items.length-1].style.display = 'block'
items[items.length-1].style.top = '0'
items[items.length-1].style.left = '-700px'
}
}
let main = document.getElementById('main'); // 轮播图整体,定义各种事件
let left = document.getElementById('left'); // 左侧按钮
let right = document.getElementById('right'); // 右侧按钮
main.onmouseover = function(){ // 鼠标移入轮播图事件,轮播暂停,显示按钮
left.style.opacity = 1
right.style.opacity = 1
page.style.opacity = 1
left.style.left = '20px'
right.style.right = '20px'
window.clearInterval(Interval)
}
main.onmouseout = function(){ // 鼠标移出轮播图事件,轮播继续,隐藏按钮
left.style.opacity = 0
right.style.opacity = 0
page.style.opacity = 0
left.style.left = '0px'
right.style.right = '0px'
items[i%items.length].style.left = '0px'
items[(i+1)%items.length].style.left = '700px'
items[(i-1)%items.length].style.left = '-700px'
Interval = setInterval(()=>{
i++
a()
},time)
}
let down = false // 定义轮播图是否有鼠标按下事件
let s // 定义按下时纵向坐标
main.onmousedown = function(e){ // 轮播图鼠标按下事件
down = true
s = e.pageX
items.forEach(item => {
item.className = 'item'
})
}
main.onmouseup = function(e){ // 轮播图鼠标抬起事件,判断移了多少,是否跳转轮播
down = false
items.forEach(item => {
item.className = 'item trans'
})
if(e.pageX-s > 100){
i--
a()
}else if(e.pageX-s < -100){
i++
a()
}else{
items[i%items.length].style.left = '0px'
items[(i+1)%items.length].style.left = '700px'
items[(i-1)%items.length].style.left = '-700px'
}
}
main.onmousemove = function(e){ // 鼠标移动事件,当鼠标按下时,移动轮播
e.preventDefault()
if(down){
items[i%items.length].style.left = e.pageX-s+'px'
items[(i+1)%items.length].style.left = 700+e.pageX-s+'px'
items[(i-1)%items.length].style.left = -700+e.pageX-s+'px'
}
}
left.onclick = function(){ // 点击左侧按钮
i--;
a()
}
right.onclick = function(){ // 点击右侧按钮
i++;
a()
}
let leftdiv = document.createElement('div') // 给左侧按钮添加箭头
leftdiv.style.width = '10px'
leftdiv.style.height = '10px'
leftdiv.style.borderWidth = '1px'
leftdiv.style.borderStyle = 'solid'
leftdiv.style.borderColor = '#fff #fff transparent transparent'
leftdiv.style.position = 'absolute'
leftdiv.style.left = '50%'
leftdiv.style.top = '50%'
leftdiv.style.transform = 'translate(-25%,-50%) rotate(-135deg)'
left.appendChild(leftdiv)
let rightdiv = document.createElement('div') // 给右侧按钮添加箭头
rightdiv.style.width = '10px'
rightdiv.style.height = '10px'
rightdiv.style.borderWidth = '1px'
rightdiv.style.borderStyle = 'solid'
rightdiv.style.borderColor = '#fff #fff transparent transparent'
rightdiv.style.position = 'absolute'
rightdiv.style.left = '50%'
rightdiv.style.top = '50%'
rightdiv.style.transform = 'translate(-75%,-50%) rotate(45deg)'
right.appendChild(rightdiv)
</script>
</body>
</html>