写这个,纯粹是为了给日后的自己一个方便。使用说明:准备5张大小一样的图片,放在同一文件夹下,本代码默认是640px ,390px大小的图片。
第一段代码
手动切换,无定时器版本。用数组存放图片路径,一次加载一张图片,本地服务器还好,在远处服务器上会有延迟。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer {
width: 640px;
margin: 50px auto;
text-align: center;
}
</style>
<script>
window.onload = function () {
const img = document.getElementsByTagName("img")[0];
const prev = document.getElementById("prev");
const next = document.getElementById("next");
const info = document.getElementById("info");
const imgArr = [
"./images/1.png",
"./images/2.png",
"./images/3.png",
"./images/4.png",
"./images/5.png",
]
let current =0;
info.textContent=`总共${imgArr.length}张图片,当前是第${current+1}张。`;
prev.onclick=function(){
current--;
if(current<0){
current=imgArr.length-1;
}
img.src = imgArr[current];
info.textContent=`总共${imgArr.length}张图片,当前是第${current+1}张。`;
}
next.onclick=function(){
current++;
if(current>imgArr.length-1){
current=0;
}
img.src = imgArr[current];
info.textContent=`总共${imgArr.length}张图片,当前是第${current+1}张。`;
}
}
</script>
</head>
<body>
<div class="outer">
<p id="info">"总共n张图片,当前是第m张。"</p>
<div class="img-wrapper">
<img src="./images/1.png" alt="">
</div>
<div class="btn-wrapper">
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</div>
</body>
</html>
第二段代码
自动切换,有定时器版本。用数组存放图片路径,一次加载一张图片,本地服务器还好,在远处服务器上会有延迟。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
width: 640px;
margin: 50px auto;
text-align: center;
}
</style>
<script>
window.onload = function () {
/*
点击按钮切换图片
*/
// 获取info
const info = document.getElementById("info")
// 获取到图片
const img = document.getElementsByTagName("img")[0]
// 获取两个按钮
const prev = document.getElementById("prev")
const next = document.getElementById("next")
// 创建一个数组来存储图片的路径
const imgArr = [
"./images/1.png",
"./images/2.png",
"./images/3.png",
"./images/4.png",
"./images/5.png",
]
// 创建一个变量记录当前图片的索引
let current = 0
//图片自动切换功能
const autobtn = document.getElementById("auto");
//创建一个变量来存储定时器的id
let timer
autobtn.onclick = () => {
//关闭定时器
clearTimeout(timer); //第一次timer还没有赋值,第二次关闭第一个timer.
//开启定时器,切换图片
timer = setTimeout(function auto() {
next.onclick();
timer = setTimeout(auto, 3000);
}, 3000)
}
info.textContent = `总共 ${imgArr.length} 张图片,当前第 ${current + 1} 张`
// 上一张
prev.onclick = function () {
//关闭定时器
clearTimeout(timer);
current--
//检查current的值是否合法
if (current < 0) {
// current = 0
current = imgArr.length - 1
}
img.src = imgArr[current]
info.textContent = `总共 ${imgArr.length} 张图片,当前第 ${current + 1} 张`
}
// 点击next按钮后,切换图片
next.onclick = function () {
//关闭定时器
clearTimeout(timer);
current++
if (current > imgArr.length - 1) {
// current = imgArr.length - 1
current = 0
}
// 切换图片 --> 2.png 就是修改img的src属性
img.src = imgArr[current]
info.textContent = `总共 ${imgArr.length} 张图片,当前第 ${current + 1} 张`
}
}
</script>
</head>
<body>
<div class="outer">
<p id="info">
总共n张图片,当前第m张
</p>
<div class="img-wrapper">
<img src="./images/1.png" alt="这是一个图片" />
</div>
<div class="btn-wrapper">
<button id="prev">上一张</button>
<button id="auto">自动</button>
<button id="next">下一张</button>
</div>
</div>
</body>
</html>
第三段代码
有定时器,无前后按钮。一次性就加载5张图片,无延迟。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
vertical-align: top;
}
ul {
list-style: none;
}
.outer {
width: 640px;
height: 390px;
margin: 100px auto;
}
.img-list {
height: 390px;
}
.img-list li { /*元素选择器+类选择器,优先级一样*/
position: absolute;
opacity: 0; /* opacity 属性指定了一个元素的不透明度。换言之,opacity 属性指定了一个元素后面的背景的被覆盖程度。*/
transition: opacity 1s; /*设置过渡效果*/
}
li.current { /*元素选择器+类选择器,优先级一样*/
z-index: 1; /*只显示当前图片*/
opacity: 1;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img-list">
<li class="current"><a href="#"><img src="./images/1.png"></a></li>
<li><a href="#"><img src="./images/2.png"></a></li>
<li><a href="#"><img src="./images/3.png"></a></li>
<li><a href="#"><img src="./images/4.png"></a></li>
<li><a href="#"><img src="./images/5.png"></a></li>
</ul>
</div>
<script>
//自动切换图片
setTimeout(function auto() {
//获取当前显示的图片
const current = document.querySelector(".img-list .current"); //img-list里面的current。
// 获取下一个图片
const next = current.nextElementSibling || document.getElementsByTagName("li")[0]
// 切换显示状态
current.classList.remove("current")
next.classList.add("current")
setTimeout(auto, 3000)
}, 3000)
</script>
</body>
</html>
第四段代码
有定时器,有前后按钮。一次性就加载5张图片,无延迟。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
img {
vertical-align: top;
}
ul {
list-style: none;
}
.outer {
width: 640px;
height: 390px;
margin: 100px auto;
position: relative; /*2个箭头相对于outer定位*/
}
.img-list {
height: 390px;
}
.img-list li {
/*元素选择器+类选择器,优先级一样*/
position: absolute;
opacity: 0;
/* opacity 属性指定了一个元素的不透明度。换言之,opacity 属性指定了一个元素后面的背景的被覆盖程度。*/
transition: opacity 1s;
/*设置过渡效果*/
}
li.current {
/*元素选择器+类选择器,优先级一样*/
z-index: 1;
/*只显示当前图片*/
opacity: 1;
}
/*
设置两个箭头的样式
*/
.prev-next a {
font-size: 60px;
color: #fff;
font-weight: bold;
text-decoration: none;
position: absolute;
height: 60px;
top: 0;
bottom: 0;
margin: auto;
z-index: 2;
opacity: 0.5;
}
.prev-next a:hover {
opacity: 1;
}
#next {
right: 0;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img-list">
<li class="current"><a href="#"><img src="./images/1.png"></a></li>
<li><a href="#"><img src="./images/2.png"></a></li>
<li><a href="#"><img src="./images/3.png"></a></li>
<li><a href="#"><img src="./images/4.png"></a></li>
<li><a href="#"><img src="./images/5.png"></a></li>
</ul>
<div class="prev-next">
<a id="prev" href="javascript:;"> <</a>
<a id="next" href="javascript:;"> ></a>
</div>
</div>
<script>
//自动切换图片
setTimeout(function auto() {
//获取当前显示的图片
const current = document.querySelector(".img-list .current"); //img-list里面的current。
// 获取下一个图片
const next = current.nextElementSibling || document.getElementsByTagName("li")[0]
// 切换显示状态
current.classList.remove("current")
next.classList.add("current")
setTimeout(auto, 3000)
}, 3000)
/*
点击按钮切换图片
*/
const prev = document.getElementById("prev")
const next = document.getElementById("next")
prev.onclick = () => {
changeImg("prev")
}
next.onclick = () => {
changeImg("next")
}
/*
changeImg 用来切换图片
参数:
dir 切换图片的方向
next
prev
*/
function changeImg(dir) {
// 获取当前显示的图片
const current = document.querySelector(".img-list .current")
// 获取下一个图片
let next
if (dir === "next") {
next =
current.nextElementSibling ||
document.getElementsByTagName("li")[0]
} else if (dir === "prev") {
next =
current.previousElementSibling ||
document.querySelector("li:last-child")
}
// 切换显示状态
current.classList.remove("current")
next.classList.add("current")
}
</script>
</body>
</html>
五张参考图片: