JavaScript_图片轮播方式
文章目录
-
- 效果图：
- 需求分析：
- 源代码：
- 所用图片：
效果图：
需求分析：
- 页面打开的时候，img中显示第一福图，order里面显示第一幅图的进度，info显示第一幅图的信息
- 初始时顺序点击播放
- 点击自动轮播按钮，变成循环播放模式，未开始播放
- 点击prev按钮，向左自动循环播放
- 点击next按钮，向右自动循环播放
- 点击顺序点击按钮，变成顺序播放模式
- 点击prev按钮，img里面变成前一张图
- 点击next按钮，img里面变成后一张图
源代码：
- HTML部分
<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部分
<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部分
- 为了简化代码，先封装一些常用的自定义构造函数
<script>
/*无*/
script>
- js主体部分，需要用到封装的函数，调用即可
<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>
- 总代码
<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>
所用图片：
由于你们没有图片，直接复制代码，展示不出效果，大家可以自己找几张图片来代替，稍微修改下即可，只要能看得懂代码，修改起来莫得问题啦