原生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>
···
