<!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
/*所有元素的内外边距清除*/
}
div {
box-sizing: border-box;
/* 使用了css3 的盒子模型,宽度和高度包含了边框的h和w */
}
em,
i {
font-style: normal
/*em/i是斜体字 让他变正*/
}
li {
list-style: none
/*去掉列表的圆形点装饰*/
}
img {
border: 0;
vertical-align: middle
/* 图片上有连接可能会导致图片出现边框让边框变无,vertical-align去掉图片底部的基线空白缝隙还能让旁边的文字垂直居中*/
}
button {
cursor: pointer
/*按钮上鼠标变手*/
}
a {
color: #666;
text-decoration: none
/*超链接去掉下划线并变色*/
}
a:hover {
color: #c81623
/*:hover让鼠标经过连接变红*/
}
button,
input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
/*这些都是字体类型\5B8B\4F53是宋体的Unicode编码显示不然中文乱码*/
border: 0px;
outline: none;
}
body {
/*css3的文字放大抗锯齿*/
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
/*字体的大小是12px行高1.5*/
}
.hide,
.none {
display: none
}
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
/*清除浮动的伪类选择器就是给添加了这个.clearfix的元素后面添加一个元素 visibility让他不显示 它必须有content 他默认是行内元素
因为我们清除浮动的基本原理就是给他内部最后一个元素添加一个div(块级元素)让他占有最下面使盒子撑开
然后给他清除浮动
*/
}
.clearfix {
*zoom: 1
/*Ie6 ie7专属清除浮动*/
}
.banner {
position: relative;
}
.banner.image {
height: 550px;
}
.banner .image .item {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
}
.banner .image .active {
opacity: 1;
}
.banner .image .item img {
position: absolute;
height: 550px;
width: 100%;
}
.banner .control .prev {
position: absolute;
left: 0px;
top: 230px;
}
.banner .control .next {
position: absolute;
right: 0px;
top: 230px;
}
.banner .indicator {
position: absolute;
left: 0px;
right: 0px;
top: 520px;
height: 16px;
display: flex;
justify-content: center;
}
.banner .indicator .indicatorItem {
display: inline-block;
width: 8px;
height: 8px;
background-color: white;
border-radius: 50%;
margin-left: 8px;
margin-right: 8px;
margin-top: 4px;
margin-bottom: 4px;
}
.banner .indicator .active {
width: 16px;
height: 16px;
margin-left: 8px;
margin-right: 8px;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<div class="banner">
<ul class="image">
<li class="item active">
<img src="./pic/1.jpg" alt="">
</li>
<li class="item">
<img src="./pic/2.jpg" alt="">
</li>
<li class="item">
<img src="./pic/3.jpg" alt="">
</li>
<li class="item">
<img src="./pic/4.jpg" alt="">
</li>
</ul>
<div class="control">
<button class="prev">上一个</button>
<button class="next">下一个</button>
</div>
<div class="indicator"></div>
</div>
<script>
// 0.获取属性
var currentIndex = 0;
var currentIndicator = 0;
var bannerEle = document.querySelector('.banner')
var controlEle = bannerEle.querySelector('.control')
var prevEle = controlEle.querySelector('.prev')
var nextEle = controlEle.querySelector('.next')
var imageEle = bannerEle.querySelector('.image')
var itemEles = imageEle.querySelectorAll('.item')
var indicatorEle = bannerEle.querySelector('.indicator')
//1.动态添加内容
//1.1动态添加图片内容
// 略
var imgLenth = 4;
// 1.2动态添加指示器图标
for (var i = 0; i < imgLenth; i++) {
//1.2.1.创建indicatorItem
var indicatorItemEle = document.createElement('div')
if (i === 0) {
indicatorItemEle.classList.add('active')
}
indicatorItemEle.classList.add('indicatorItem')
indicatorEle.append(indicatorItemEle)
//1.2.2.添加点击监听,实现indicator切换
indicatorItemEle.index=i
indicatorItemEle.addEventListener('click', function () {
itemEles[currentIndex].className = 'item'
indicatorItemEles[currentIndicator].className = 'indicatorItem'
currentIndex = this.index
currentIndicator = this.index
itemEles[currentIndex].className = 'item active'
indicatorItemEles[currentIndicator].className = 'indicatorItem active'
})
}
var indicatorItemEles = indicatorEle.querySelectorAll('.indicatorItem')
//2.用上一个下一个切换图片
prevEle.addEventListener('click', function () {
itemEles[currentIndex].className = 'item'
indicatorItemEles[currentIndicator].className = 'indicatorItem'
currentIndex = currentIndex - 1
currentIndicator = currentIndicator - 1
if (currentIndex === -1) {
currentIndex = imgLenth - 1
}
if (currentIndicator === -1) {
currentIndicator = imgLenth - 1
}
itemEles[currentIndex].className = 'item active'
indicatorItemEles[currentIndicator].className = 'indicatorItem active'
})
nextEle.addEventListener('click', function () {
nextSwitch()
})
//3.开启自动轮播
var timer = null
startTimer()
//4.关闭自动轮播
//鼠标enter图片时关闭,leave时开启
overTimer()
//封装函数:播放下一个
function nextSwitch() {
itemEles[currentIndex].className = 'item'
indicatorItemEles[currentIndicator].className = 'indicatorItem'
currentIndex = (currentIndex + 1) % imgLenth
currentIndicator = (currentIndicator + 1) % imgLenth
itemEles[currentIndex].className = 'item active'
indicatorItemEles[currentIndicator].className = 'indicatorItem active'
}
//封装函数:开启轮播
function startTimer() {
timer = setInterval(function () {
nextSwitch()
}, 5000)
}
//封装函数:关闭轮播
function overTimer() {
bannerEle.addEventListener('mouseenter', function () {
clearInterval(timer)
})
bannerEle.addEventListener('mouseleave', function () {
startTimer()
})
}
</script>
</body>
</html>
标签：indicatorItem,轮播,实现,currentIndicator,javascript,className,currentIndex,var,banne From： https://www.cnblogs.com/theYT/p/17180555.html