Article Directory
Effect picture:
demand analysis:
- When the page is opened, the first picture is displayed in the img, the progress of the first picture is displayed in the order, and the information of the first picture is displayed in info.
- Initially click to play
- Click the automatic rotation button to change to the loop playback mode, and the playback is not started
- Click the prev button to automatically loop to the left
- Click the next button to automatically loop to the right
- Click the sequence button to change to sequence play mode
- Click the prev button, the img will become the previous picture
- Click the next button, the img will become the next picture
Source code:
- HTML part
<div id="controls">
<input id="round" type="button" value="自动轮播">
<input id="single" type="button" value="顺序点击">
</div>
<div id="container">
<a href='javascript:' id="prev"><</a>
<a href='javascript:' id="next">></a>
<div id="order">图片加载中……</div>
<div id="info">图片加载中……</div>
<img id="picture">
</div>
- css part
<style>
#controls {
width: 400px;
margin: auto;
text-align: center;
}
#container {
width: 400px;
height: 400px;
border: 10px solid #eee;
position: relative;
background: gray;
margin: 10px auto 0;
}
#prev,#next {
position: absolute;
background: black;
filter: alpha('opacity:40');
opacity: 0.4;
font-size: 20px;
color: white;
width: 40px;
height: 40px;
border: 2px solid white;
line-height: 40px;
text-align: center;
top: 180px;
pointer: cursor;
text-decoration: none;
}
#prev:hover,#next:hover {
filter: alpha('opacity:80');
opacity: 0.8;
}
#order,#info {
position: absolute;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
background: black;
filter: alpha('opacity:60');
opacity: 0.6;
font-size: 20px;
color: white;
}
#prev {
left: 0;
}
#next {
right: 0;
}
#picture {
height: 400px;
width: 400px;
}
#order {
top: 0;
}
#info {
bottom: 0;
}
</style>
- JavaScript part
- In order to simplify the code, first encapsulate some commonly used custom constructors
<script>
/*无*/
</script>
- The main part of js, you need to use the encapsulated function, just call
<script>
// 0 获取相关元素
var img = document.getElementById('picture');// 显示图片的元素
var orderDiv = document.getElementById('order');// 显示图片进度的div
var infoDiv = document.getElementById('info');// 显示图片信息的div
var roundBtn = document.getElementById('round');//自动轮播按钮
var singleBtn = document.getElementById('single');//顺序点击按钮
var prevBtn = document.getElementById('prev');//上一张图按钮
var nextBtn = document.getElementById('next');//下一张图按钮
// 需要一个遍历记录当前时自动轮播还是顺序点击
// 2 初始时顺序点击
var flag = true; // true:顺序点击 false:自动轮播
// 需要一个数组记录所有图片的src
var srcArr = ['6.jpg', '7.jpg', '8.jpg', '9.jpg']
// 需要一个数组记录图片的信息
var infoArr = ['1', '2', '3', '4']
// 需要一个遍历记录当前的图片的索引
var index = 0;
// 1 页面打开的时候
showImg()
var timer;
// 3 点击自动轮播按钮变成自动轮播
roundBtn.onclick = function () {
flag = false;
alert('现在是自动轮播')
}
// 4 点击顺序点击按钮变成顺序点击
singleBtn.onclick = function () {
flag = true;
clearInterval(timer);
alert('现在是顺序点击')
}
// 5 点击prev按钮，img里面变成前一张图
prevBtn.onclick = function () {
if (flag) {
// 进入此处，说明flag 是true，顺序点击
index <= 0 ? index = infoArr.length - 1 : index--;
showImg();
} else {
// 进入此处，说明flag 是false，自动轮播
clearInterval(timer);
timer = setInterval(function () {
index--;
if (index < 0) {
index = infoArr.length - 1;
}
showImg();
}, 1000);
}
}
// 6 点击next按钮，img里面变成后一张图
nextBtn.onclick = function () {
if (flag) {
// 进入此处，说明flag 是true，顺序点击
index >= infoArr.length - 1 ? index = 0 : index++;
showImg();
} else {
// 进入此处，说明flag 是false，自动轮播
clearInterval(timer);
timer = setInterval(function () {
index++;
if (index >= infoArr.length) {
index = 0;
}
showImg();
}, 1000);
}
}
// 定义一个函数，显示第index幅图
function showImg() {
// img中显示第一福图
img.src = srcArr[index];
// order里面显示第一幅图的进度
orderDiv.innerHTML = (index + 1) + "/" + srcArr.length;
// info显示第一幅图的信息
infoDiv.innerHTML = infoArr[index]
}
</script>
- Total code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播的两种方式</title>
<style>
#controls {
width: 400px;
margin: auto;
text-align: center;
}
#container {
width: 400px;
height: 400px;
border: 10px solid #eee;
position: relative;
background: gray;
margin: 10px auto 0;
}
#prev,#next {
position: absolute;
background: black;
filter: alpha('opacity:40');
opacity: 0.4;
font-size: 20px;
color: white;
width: 40px;
height: 40px;
border: 2px solid white;
line-height: 40px;
text-align: center;
top: 180px;
pointer: cursor;
text-decoration: none;
}
#prev:hover,#next:hover {
filter: alpha('opacity:80');
opacity: 0.8;
}
#order,#info {
position: absolute;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
background: black;
filter: alpha('opacity:60');
opacity: 0.6;
font-size: 20px;
color: white;
}
#prev {
left: 0;
}
#next {
right: 0;
}
#picture {
height: 400px;
width: 400px;
}
#order {
top: 0;
}
#info {
bottom: 0;
}
</style>
</head>
<body>
<div id="controls">
<input id="round" type="button" value="自动轮播">
<input id="single" type="button" value="顺序点击">
</div>
<div id="container">
<a href='javascript:' id="prev"><</a>
<a href='javascript:' id="next">></a>
<div id="order">图片加载中……</div>
<div id="info">图片加载中……</div>
<img id="picture">
</div>
<script>
// 0 获取相关元素
var img = document.getElementById('picture');// 显示图片的元素
var orderDiv = document.getElementById('order');// 显示图片进度的div
var infoDiv = document.getElementById('info');// 显示图片信息的div
var roundBtn = document.getElementById('round');//自动轮播按钮
var singleBtn = document.getElementById('single');//顺序点击按钮
var prevBtn = document.getElementById('prev');//上一张图按钮
var nextBtn = document.getElementById('next');//下一张图按钮
// 需要一个遍历记录当前时自动轮播还是顺序点击
// 2 初始时顺序点击
var flag = true; // true:顺序点击 false:自动轮播
// 需要一个数组记录所有图片的src
var srcArr = ['6.jpg', '7.jpg', '8.jpg', '9.jpg']
// 需要一个数组记录图片的信息
var infoArr = ['1', '2', '3', '4']
// 需要一个遍历记录当前的图片的索引
var index = 0;
// 1 页面打开的时候
showImg()
var timer;
// 3 点击自动轮播按钮变成自动轮播
roundBtn.onclick = function () {
flag = false;
alert('现在是自动轮播')
}
// 4 点击顺序点击按钮变成顺序点击
singleBtn.onclick = function () {
flag = true;
clearInterval(timer);
alert('现在是顺序点击')
}
// 5 点击prev按钮，img里面变成前一张图
prevBtn.onclick = function () {
if (flag) {
// 进入此处，说明flag 是true，顺序点击
index <= 0 ? index = infoArr.length - 1 : index--;
showImg();
} else {
// 进入此处，说明flag 是false，自动轮播
clearInterval(timer);
timer = setInterval(function () {
index--;
if (index < 0) {
index = infoArr.length - 1;
}
showImg();
}, 1000);
}
}
// 6 点击next按钮，img里面变成后一张图
nextBtn.onclick = function () {
if (flag) {
// 进入此处，说明flag 是true，顺序点击
index >= infoArr.length - 1 ? index = 0 : index++;
showImg();
} else {
// 进入此处，说明flag 是false，自动轮播
clearInterval(timer);
timer = setInterval(function () {
index++;
if (index >= infoArr.length) {
index = 0;
}
showImg();
}, 1000);
}
}
// 定义一个函数，显示第index幅图
function showImg() {
// img中显示第一福图
img.src = srcArr[index];
// order里面显示第一幅图的进度
orderDiv.innerHTML = (index + 1) + "/" + srcArr.length;
// info显示第一幅图的信息
infoDiv.innerHTML = infoArr[index]
}
</script>
</body>
</html>
Picture used:
Since you don’t have pictures, you can copy the code directly and it won’t show the effect. You can find a few pictures to replace it and modify it slightly. As long as you can understand the code, the modification will not be a problem.