Ⅰ、问题描述:
1、用JavaScript + html + css 实现,轮播图的循环播放和顺序播放等功能;
2、分析:
A、需要用 html + css 实现盒子模型的布局,呈现出轮播图的大致形状;
B、调用 JavaScript 中的 DOM 操作,实现加载信息的函数、左箭头事件绑定、右箭头事件绑定;
C、最后通过 DOM 操作实现轮播图的顺序播放事件的绑定、循环播放事件的绑定;
Ⅱ、实现过程如下:
1、运行软件VScode,亲测可实现;
2、运行代码:
<!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;
}
#controls {
width: 400px;
margin: auto;
text-align: center;
}
#container {
width: 400px;
height: 400px;
border: 10px solid #eee;
background-color: gray;
margin: 10px auto 0;
position: relative;
}
#prev,
#next {
position: absolute;
background: black;
filter:alpha(opacity=40); /*该语句时为了兼容性问题,opacity(透明度) 是为了 IE8 以上的浏览器可直接使用, 而 '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;
cursor: pointer;
text-decoration: none;
}
#prev:hover,
#next:hover
{
opacity: 0.8;
filter: alpha(opacity=80);
}
#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 type="button" value="循环播放" id="round">
<input type="button" value="顺序播放" id="single">
</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 type="text/javascript">
var imgArr = ['6.jpg','7.jpg','8.jpg','9.jpg'];
//将图片的位置信息放在数组里;
var txtArr = ['图片一','图片二','图片三','图片四'];
//将对应的图片信息能放在盒子中;
var index = 0;
var flag = true; //代表默认的情况是:顺序播放事件;
function $(id) {
//封装函数,根据 id 找元素;
return document.getElementById(id);
}
function showData() {
//封装函数,根据 id 将盒子中的图片,修改文字等放在盒子的相关位置上;
$('order').innerHTML = (index+1) + '/' + imgArr.length; //显示1/4、2/4....等信息;
$('info').innerHTML = txtArr[index]; //显示是图片几 (即:txtArr 中内容);
$('picture').src = imgArr[index]; //显示是第几张图片 (即:imgArr 中信息);
}
showData(); //千万别忘了运行该函数;
//左箭头事件绑定;
$('prev').onclick = function() {
index--;
if( flag && index === -1) {
//flag 为 true 代表其是顺序播放;
index = 0;
alert('已经是第一张了!');
} else if(!flag && index === -1){
//flag 为 false 代表其是循环播放;
index = imgArr.length - 1;
}
showData(); //运行加载信息的函数;
}
//右箭头事件绑定;
$('next').onclick = function() {
index++;
if( flag && index === imgArr.length) {
//flag 为 true 代表其是顺序播放;
index = imgArr.length - 1;
alert('已经是最后一张了!');
} else if ( !flag && index === imgArr.length) {
//flag 为 false 代表其是循环播放;
index = 0;
}
showData(); //运行加载信息的函数;
}
//顺序播放事件绑定;
$('single').onclick = function() {
flag = true; //表示:当点击'开始顺序播放了'按钮时,就将 flag 的值转换成 true ,以备触发事件时使用;
alert('开始顺序播放了');
}
//循环播放事件绑定;
$('round').onclick = function() {
flag = false; //表示:当点击'开始循环播放了'按钮时,就将 flag 的值转换成 false ,以备触发事件时使用;
alert('开始循环播放了');
}
</script>
</body>
</html>
3、注意:
A、我没有附上图片的信息,自己可以随便找到四张照片,图片的名字与位置和数组 imgArr 中的保持一致即可;
B、若自己实现不了,可以找我上传的文档拿下来就可以在浏览器或 VScode,以及其他软件上可直接实现,地址为:
https://download.csdn.net/download/weixin_43405300/19627780?spm=1001.2014.3001.5503
4、结果展示:
A、顺序播放,结果展示:
其一、点击顺序播放按钮后;
其二、随便的一张图片展示:
其三、点击到第一张后,再点击左箭头的显示结果;
其四、点击到最后一张后,再点击右箭头的显示结果;
B、循环播放,结果展示:
其一、点击顺序播放按钮后;
其二、随便的一张图片展示:
其三、点击到第一张后,再点击左箭头的显示结果;(即:它会回到第四页)
其四、点击到最后一张后,再点击右箭头的显示结果;(即:它会回到第一页)
Ⅲ、小结:
哪里有不对或不合适的地方,还请大佬们多多指点和交流!
如果看完博客之后,还运行不成功,再附上已传文档的链接地址:
https://download.csdn.net/download/weixin_43405300/19627780?spm=1001.2014.3001.5503