原生JavaScript封装轮播图

最新推荐文章于 2023-04-21 14:22:29 发布

DDad.

最新推荐文章于 2023-04-21 14:22:29 发布

阅读量193

点赞数 1

文章标签： javascript css html 前端 css3

本文链接：https://blog.csdn.net/qq_41525527/article/details/121090686

版权

自己修改图片即可

html代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>banner</title>
	<link rel="stylesheet" type="text/css" href="css/banner.css"/>
</head>
<body>
	<div class="box">
		<div class="banner">
			<div class="container" style="left: 0;">
				<div class="slider">
					<img src="images/banner/banner1.png" >
				</div>
				<div class="slider">
					<img src="images/banner/banner2.png" >
				</div>
				<div class="slider">
					<img src="images/banner/banner3.png" >
				</div>
				<div class="slider">
					<img src="images/banner/banner4.png" >
				</div>
			</div>
			<div class="banner-pagination">
				<ul class="flip">
					<!-- <li class="active"></li>
					<li></li>
					<li></li> -->
				</ul>
			</div>
			<div class="slider-next slider-lr">&gt;</div>
			<div class="slider-prev slider-lr">&lt;</div>
		</div>
	</div>
</body>
<script src="js/banner.js" type="text/javascript" charset="utf-8"></script>
</html>

css代码:

*{
	margin: 0 auto;
	padding: 0 auto;
}
a{
	text-decoration: none;
	color: #000000;
}
ul,li{
	list-style: none;
}
.banner{
	margin: 5px auto;
	border-radius: 5px;
	height: 200px;
	width: 400px;
	overflow: hidden;
	position: relative;
}

.container{
	position: absolute;
	/* width: 1600px; */
	height: 200px;
	z-index: 1;
	/* transition: left 0.2s; */
	/* left: -600px; */
}
.slider{
	width: 400px;
	height: 200px;
	border-radius: 5px;
	float: left;
}
.slider img{
	width: 100%;
	height: 100%;
	border-radius: 5px;
	
}
.banner-pagination{
	position: absolute;
	z-index: 2;
	bottom: 5px;
	color: #fff;
	left: 50%;
	/* width: 40%; */
	text-align: center;
	transform: translate(-50%);
	/* bottom: 10px; */
}
.banner-pagination li{
	float: left;
	height: 3px;
	width: 20px;
	margin: 5px;
	background-color: #fff;
	border-radius: 1.5px;
}
li.active{
	background-color: #ccc;
}
.slider-lr{
	position: absolute;
	z-index: 2;
	width: 30px;
	height: 30px;
	background-color: rgba(207,207,207,.7);
	text-align: center;
	line-height: 27px;
	vertical-align: middle;
	border-radius: 5px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}
.slider-prev{
	top: 50%;
	left: 20px;
	transform: translate(-50%);
}
.slider-next{
	top: 50%;
	transform: translate(-50%);
	right: -10px;
	
}

js代码

var banner = document.querySelector('.banner')
var container = document.querySelector('.container')
var next = document.querySelector('.slider-next')
var prev = document.querySelector('.slider-prev')
var slider = document.querySelectorAll('.slider')
// 下方翻页按钮
var flip = document.querySelector('.flip')
var index = 0;
// 自动播放
var timer = null;
// 自动播放间隔时间
var interval = 3000

// 循环生成翻页按钮以及页面宽度
function flipGroup(){
	for(let i = 0;i<slider.length;i++){
		container.style.width = slider.length * slider.offsetWidth;
		stripGroup = flip.appendChild(document.createElement('li'))
		stripGroup.classList.add('strip')
	}
}
flipGroup();

// 下一张图片
next.onclick = function(){
	next_pic();
}
// 上一张图片
prev.onclick = function(){
	prev_pic();
}
function next_pic(){
	var newLeft = 0;
	if(container.style.left ===-((slider.length-1)*slider[0].offsetWidth)+'px'){
		newLeft = 0;
	}else{
		newLeft = parseInt(container.style.left)-400;
	}
	container.style.left = newLeft+'px';
	index++;
	if(index>slider.length-1){
		index=0;
	}
	showCurrentArrow();
}
function prev_pic(){
	var newLeft = 0;
	if(container.style.left ==='0px'){
		newLeft = -((slider.length-1)*slider[0].offsetWidth)+'px'
	}else{
		newLeft = parseInt(container.style.left)+400
	}
	container.style.left = newLeft+'px';
	index--;
	if(index<0){
		index = slider.length-1
	}
	showCurrentArrow();
}

// 自动播放

function autoPlay(){
	timer = setInterval(function(){
		next_pic()
	},interval)
}
autoPlay();
// 手机端不支持
// banner.onmouseenter = function(e){
// 	clearInterval(timer)
// 	console.log('停止播放'+e.target)
// }
// banner.onmouseleave = function(){
// 	autoPlay();
// }

// 翻页按钮
var arrow = document.querySelectorAll('.strip')
// 给第一个添加默认样式
arrow[0].classList.add('active');
console.log(arrow.length)
// 动态添加翻页按钮样式
function showCurrentArrow(){
	for(let i =0;i<arrow.length;i++){
		arrow[i].className = ''
	}
	arrow[index].className = 'active'
}
// 点击翻页按钮实现切换
function onArrow(){
	for(let i=0;i<arrow.length;i++){
		(function(i){
			arrow[i].onclick = function(){
				var point = index-i;
				if(index == slider.length-1&&parseInt(container.style.left)!==-(slider.length-1)*slider[0].offsetWidth){
					point -=slider.length
				}
				if(index ==0&&parseInt(container.style.left)!==0){
					point += slider.length
				}
				container.style.left = (parseInt(container.style.left)+point*slider[0].offsetWidth)+'px'
				index =i;
				showCurrentArrow()
			}
		})(i)
	}
}
onArrow();

DDad.

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
原生JavaScript封装轮播图

自己修改图片即可html代码<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title
复制链接

扫一扫