原生js实现的两种播放效果
效果一
循环播放，单一的效果
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片切换</title>
<style>
*{
padding: 0;
margin: 0;
}
#content{
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 50px auto;
position: relative;
background-color: aliceblue;
}
#content a{
width: 40px;
height: 40px;
background-color: #000;
border: 5px solid #fff;
position: absolute;
top: 175px;
text-decoration: none;
line-height: 40px;
text-align: center;
color: #fff;
filter: opacity(50);
opacity: 0.5;
}
#content a:hover{
filter: opacity(100);
opacity: 1;
}
#prev{left: 10px;}
#next{ right: 10px;}
#desc,#num{
position: absolute;
left: 0;
width: 100%;
height: 30px;
line-height: 30px;
box-sizing: border-box;
background-color: #000;
color: #fff;
filter: opacity(50);
opacity: 0.5;
padding: 0 10px;
}
#desc{bottom: 0;}
#img{width: 400px;height: 400px;}
#num{filter: opacity(.9);
opacity: 90;
text-align: center;
}
</style>
<script>
window.onload = function () {
const oPrev = document.getElementById('prev');
const oNext = document.getElementById('next');
const oImg = document.getElementsByTagName('img')[0];
const oDesc = document.getElementById('desc');
const oNum = document.getElementById('num');
const oImgs = ['images/img1.png', 'images/img2.png', 'images/img3.png', 'images/img4.png'];
const oText = ["这是第一张图片", "这是第二张图片", "这是第三张图片", "这是第四张图片"]
let num = 0;
tabChange()
oPrev.addEventListener('click', function(){
num--
if(num < 0){
num = oImgs.length-1;
}
tabChange()
})
oNext.addEventListener('click', function(){
num++
if(num == oImgs.length){
num = 0;
}
tabChange()
})
function tabChange(){
//计算图片数量
oNum.innerHTML = num+1 + "/" + oImgs.length;
oImg.src = oImgs[num];
oDesc.innerHTML = oText[num];
}
}
</script>
</head>
<body>
<div id="content">
<a id="prev" href="javascript:;"><</a>
<img id="img" alt="">
<p id="desc">图片文字加载中...</p>
<span id="num">正在计算中...</span>
<a id="next" href="javascript:;">></a>
</div>
</body>
</html>
效果二
可以控制是否轮播播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片切换</title>
<style>
*{
padding: 0;
margin: 0;
}
#content{
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 50px auto;
position: relative;
background-color: aliceblue;
}
#content a{
width: 40px;
height: 40px;
background-color: #000;
border: 5px solid #fff;
position: absolute;
top: 175px;
text-decoration: none;
line-height: 40px;
text-align: center;
color: #fff;
filter: opacity(50);
opacity: 0.5;
}
#content a:hover{
filter: opacity(100);
opacity: 1;
}
#prev{left: 10px;}
#next{ right: 10px;}
#desc,#num{
position: absolute;
left: 0;
width: 100%;
height: 30px;
line-height: 30px;
box-sizing: border-box;
background-color: #000;
color: #fff;
filter: opacity(50);
opacity: 0.5;
padding: 0 10px;
}
#desc{bottom: 0;}
#img{width: 400px;height: 400px;}
#num{filter: opacity(.9);
opacity: 90;
text-align: center;
}
.tool{
text-align: center;
}
</style>
<script>
window.onload = function () {
const oPrev = document.getElementById('prev');
const oNext = document.getElementById('next');
const oImg = document.getElementsByTagName('img')[0];
const oDesc = document.getElementById('desc');
const oNum = document.getElementById('num');
const oLoop = document.getElementById('loop');
const oStop = document.getElementById('stop');
const oImgs = ['images/img1.png', 'images/img2.png', 'images/img3.png', 'images/img4.png'];
const oText = ["这是第一张图片", "这是第二张图片", "这是第三张图片", "这是第四张图片"]
let num = 0;
let isLoop = true;
oLoop.addEventListener('click', function(){
isLoop = true;
})
oStop.addEventListener('click', function(){
isLoop = false;
})
tabChange()
oPrev.addEventListener('click', function(){
num--
if(num < 0){
if(isLoop){
num = oImgs.length-1;
}else{
alert("没有上一页了")
num = 0;
return false;
}
}
tabChange()
})
oNext.addEventListener('click', function(){
num++
if(num == oImgs.length){
if(isLoop){
num = 0;
}else{
alert("没有下一页了")
num = oImgs.length-1;
return false;
}
}
tabChange()
})
function tabChange(){
//计算图片数量
oNum.innerHTML = num+1 + "/" + oImgs.length;
oImg.src = oImgs[num];
oDesc.innerHTML = oText[num];
}
}
</script>
</head>
<body>
<div class="tool">
<h1>图片切换</h1>
<button id="loop">循环切换</button>
<button id="stop">停止循环切换</button>
</div>
<div id="content">
<a id="prev" href="javascript:;"><</a>
<img id="img" alt="">
<p id="desc">图片文字加载中...</p>
<span id="num">正在计算中...</span>
<a id="next" href="javascript:;">></a>
</div>
</body>
</html>
···
