效果查看网址
https://www.xiefansq.cn/jsTest/2022/9/9-26lunbotupian/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播js-threejs百宝箱</title>
<style>
body { margin: 0; }
</style>
<style>
.outer{
width: 1000px;
height: 450px;
/* border:4px solid black; */
position: relative;
border-radius: 10px;
overflow: hidden;
margin: 0 auto ;
top:20px;
}
.inner{
height: 100%;
width: 100%;
background-color: aquamarine;
position: relative;
left: 0px;
display: flex;
/* 过度动画 */
transition: all 1s;
}
.outer .inner .a {
height: 100%;
width: 100%;
flex-shrink: 0;
object-fit: cover;
}
.outer .inner .a .img{
height: 100%;
width: 100%;
flex-shrink: 0;
object-fit: cover;
}
.outer .next .btn{
/* 绝对定位并且居中切换按钮 */
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
background-color: blue;
color: white;
width: 50px;
height: 50px;
border-radius: 8px;
font-size: 40px;
font-weight: bold;
/* 字符水平居中 */
line-height: 50px;
text-align: center;
user-select: none;
display: flex;
}
.outer .next .left{
left: 20px;
}
.outer .next .right{
right: 20px;
}
.outer .nextBiao{
/* 绝对定位并且居中切换按钮 */
bottom: 20px;
position: absolute;
left: 0;
right: 0;
width: max-content;
margin: 0 auto ;
opacity: 0.2;
}
.nextBiao .btn{
height: 5px;
width: 40px;
background-color: blue;
cursor: pointer;
}
.outer:hover .nextBiao{
opacity:1;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<a href="https://www.xiefansq.cn/" target="_blank"><img src="./img/1.jpg"></a>
<a href="https://www.xiefansq.cn/" target="_blank"> <img src="./img/2.jpg"></a>
<a href="https://www.xiefansq.cn/" target="_blank"> <img src="./img/3.jpg"></a>
</div>
<div class="next">
<button class="btn left" onclick="leftS()"><</button>
<button class="btn right" onclick="rightS()">></button>
</div>
<div class="nextBiao">
<button class="btn" onclick="setindex(0)"></button>
<button class="btn" onclick="setindex(1)"></button>
<button class="btn" onclick="setindex(2)"></button>
</div>
</div>
<script>
//自动滚动
// setInterval(()=>{
// index++
// nextImg()
// },3000 )
//重置自动滚动
function createAuto(){
return setInterval(()=>{
index++
nextImg()
},3000 )
}
let autoTimer=createAuto()
//___________
let index=0
function nextImg(){
//获取轮播框元素
let outDiv =document.querySelector(".outer")
//获取轮播框宽度
//限制下标记范围
if(index>2){
index=2
}else if(index<0){
index=0
}
let width = getComputedStyle(outDiv).width
width = Number(width.slice(0,-2))
outDiv.querySelector(".inner").style.left=index*width*-1+"px"
}
nextImg()
function leftS(){
index--
nextImg()
clearInterval(autoTimer)
let autoTimer=createAuto()
}
function rightS(){
index++
nextImg()
clearInterval(autoTimer)
let autoTimer=createAuto()
}
function setindex(num){
index=num
nextImg()
}
</script>
</body>
</html>
|
