纯原生JS轮播图代码

浏览：806次- 评论：3次- 发布时间：2020-08-21

Html

Css

.wrap {
	width:1000px;
	height:380px;
	position:relative;
	margin:50px auto 0;
}
.list {
	position:relative;
	list-style:none;
	padding-left:0;
	width:100%;
	height:380px;
}
.list li {
	width:100%;
	height:100%;
	color:#fff;
	font-size:50px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.list li:nth-child(1) {
	background-color:#70f3ff;
}
.list li:nth-child(2) {
	background-color:#ff461f;
}
.list li:nth-child(3) {
	background-color:#bce672;
}
.list li:nth-child(4) {
	background-color:#8c4356;
}
.list li:nth-child(5) {
	background-color:#ff4c00;
}
.list li:nth-child(6) {
	background-color:#eedeb0;
}
.list li:nth-child(7) {
	background-color:#4c221b;
}
.list li:nth-child(8) {
	background-color:#801dae;
}
.item {
	width:100%;
	position:absolute;
	opacity:0;
	transition:all 1s;
}
.item img {
	width:100%;
}
.btn-img {
	position:absolute;
	top:147px;
	cursor:pointer;
	z-index:100;
	opacity:0;
	transition:all .5s;
}
.wrap:hover .btn-img {
	opacity:1;
}
.item.active {
	opacity:1;
	z-index:10;
}
#prev {
	left:0;
}
#next {
	right:0;
}
.pointList {
	padding-left:0;
	list-style:none;
	position:absolute;
	bottom:1em;
	left:50%;
	transform:translateX(-50%);
	z-index:10000;
	width:100%;
	height:10px;
	margin:0;
	display:flex;
	justify-content:center;
}
.pointList li {
	width:12px;
	height:12px;
	border-radius:50%;
	background:#e4c6d0;
	float:left;
	margin-left:10px;
	cursor:pointer;
	transition:all .8s;
}
.pointList li.on {
	width:45px;
	border-radius:10px;
	background-color:#f60;
}

// 获取整个大容器
 var wrap = document.getElementById('wrap')
 // 图片
 var list = document.getElementById('list')
 var items = list.getElementsByTagName('li')
 // 按钮
 var prev = document.getElementById('prev')
 var next = document.getElementById('next')
 // 指示点
 var pointList = document.getElementById('pointList')
 var pointLis = pointList.getElementsByTagName('li')
 var index = 0 //当前展示图片
 // 清除class
 var clearClassName = function() {
     for (let i = 0; i < items.length; i++) {
         items[i].className = 'item'
     }
     for (let i = 0; i < pointLis.length; i++) {
         pointLis[i].className = ''
     }
 }
 var goIndex = function() {
     clearClassName()
     pointLis[index].className = 'on'
     items[index].className = 'item active'
 }
 // 下一张
 function goNext() {
     index++
     if (index == items.length) {
         index = 0
     }
     goIndex()
 }
 next.addEventListener('click', function() {
     goNext()
 })
 // 上一张
 function goPrev() {
     index--
     if (index < 0) {
         index = items.length - 1
     }
     goIndex()
 }
 prev.addEventListener('click', function() {
     goPrev()
 })
 // 原点点击事件
 for (let i = 0; i < pointLis.length; i++) {
     pointLis[i].addEventListener('click', function() {
         var pointIndex = this.getAttribute('data-index')
         index = pointIndex
         goIndex()
     })
 }

// 定时自动轮播
 var timer
 timer = setInterval(() => {
     goNext()
 }, 1500)
 // 鼠标移入清除定时器
 wrap.onmouseenter = function() {
     clearInterval(timer)
 }
 // 鼠标移出，开启定时器
 wrap.onmouseleave = function() {
     clearInterval(timer)
     timer = setInterval(() => {
         goNext()
     }, 1500)
 }

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3