需求:
- 图片会自动播放,即有一个图片轮播效果,当窗口获取焦点时,停止自动播放效果。
- 在左右两侧各有一个箭头,分别指的是向左和向右切换,即点击相应的位置就会切换到该图片之前(或之后)的一张图片。
- 在图片的下方有一排圆,点击圆时就切换到对应的图片。
实现代码:
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href='banner.css' rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="banner">
<ul class="img">
<li style="display: block;"><a href="#"><img src="img/1.jpg"></a></li>
<li><a href="#"><img src="img/2.jpg"></a></li>
<li><a href="#"><img src="img/3.jpg"></a></li>
<li><a href="#"><img src="img/4.jpg"></a></li>
<li><a href="#"><img src="img/5.jpg"></a></li>
</ul>
<ul class="num">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<a href="javascript:;" class="arrow left"><</a>
<a href="javascript:;" class="arrow right">></a>
</div>
<script src='js/banner.js' type='text/javascript'></script>
</body>
</html>
CSS部分
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}
#banner {
width: 720px;
height: 360px;
margin: 20px auto;
position: relative;
}
.img>li {
position: absolute;
top: 0;
left: 0;
display: none;
}
.img img {
width: 720px;
height: 360px;
}
.num {
position: absolute;
left: 39%;
bottom: 10px;
}
.num>li {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 100%;
background-color: #666;
text-align: center;
line-height: 25px;
color: #fff;
font-weight: 500;
cursor: pointer;
}
/* 左右箭头 */
.arrow {
display: inline-block;
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: 39%;
font-size: 24px;
color: #fff;
line-height: 60px;
text-align: center;
display: none;
}
#banner:hover .arrow {
display: block;
}
.left {
left: 0;
border-top-right-radius: 60px;
border-bottom-right-radius: 60px;
}
.right {
right: 0;
border-top-left-radius: 60px;
border-bottom-left-radius: 60px;
}
.num .active {
background-color: #f00;
}
JS部分
//获取元素
var bannerEle = document.querySelector('#banner');
var imgEles = document.querySelectorAll('.img>li');
var numEles = document.querySelectorAll('.num>li');
var leftEle = document.querySelector('.left');
var rightEle = document.querySelector('.right');
//计数变量
var index = 0;
var interval = setInterval(run, 2000);
/* 图片会自动播放,即有一个图片轮播效果,
当窗口获取焦点时,停止自动播放效果。 */
bannerEle.onmouseover = function() {
clearInterval(interval)
}
bannerEle.onmouseout = function() {
interval = setInterval(run, 2000);
}
/*
在左右两侧各有一个箭头,分别指的是向左和向右切换,
即点击相应的位置就会切换到该图片之前(或之后)
的一张图片。
*/
leftEle.onclick = function() {
index--;
if (index < 0) {
index = imgEles.length - 1
}
changeImg();
}
rightEle.onclick = function() {
run();
}
/* 在图片的下方有一排圆,点击每一个圆形就切换到对应的图片。*/
var numEle = document.querySelector('.num');
//事件委托(事件冒泡原理)
numEle.onclick = function(e){
index = e.target.innerText-1
changeImg();
}
// for (var i = 0; i < numEles.length; i++) {
// numEles[i].id = i;
// numEles[i].onclick = function() {
// index = this.id;
// changeImg();
// }
// }
function run() {
index++;
if (index >= imgEles.length) {
index = 0;
}
changeImg();
}
function changeImg() {
for (var i = 0; i < imgEles.length; i++) {
imgEles[i].style.display = 'none';
numEles[i].className = '';
}
imgEles[index].style.display = 'block';
numEles[index].className = 'active';
}
图片资源:
欢迎大家阅读,本人见识有限,写的博客难免有错误或者疏忽的地方,还望各位指点,在此表示感激不尽。文章持续更新中…