用JS写轮播图

最新推荐文章于 2023-12-02 17:51:11 发布

朝去夜来

最新推荐文章于 2023-12-02 17:51:11 发布

阅读量871

点赞数 2

分类专栏： js 文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/wenqi1/article/details/123017692

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该轮播图可实现每隔1秒跳转至下一图片，左右两个箭头可以控制图片前后移动，下面的数字圆圈可以实现点击便跳转到相应图片。

图片比盒子设定的宽高大也没关系，在CSS中设定了overflow隐藏，溢出部分将不显示。

下面是代码：

lunbotu.html 轮播图的结构部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./lunbo.css"/>
		</style>
	</head>
	<body>
		<div class="container">
		</div>
		<script src="./jquery.min.js"></script>
		<script src="./lunbo.js"></script>
		<script>
				lunbo.start('.container', ['./8.jpg', './9.jpg', './10.jpg', './11.jpg']);
		</script>
	</body>
</html>

lunbo.css 轮播图的样式部分

* {
	padding: 0;
	margin: 0;
}

.container {
	width: 1580px;
	height: 900px;
	position: relative;
	overflow: hidden;
}

.btn {
	display: block;
	position: absolute;
	top: 390px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	width: 60px;
	background-color: rgb(187, 187, 194);
	z-index: 5;
	font-size: 60px;
	font-weight: 800;
	color: darkcyan;
	cursor: pointer;
	opacity: 0.6;
}

.next {
	right: 0px;
}

.item {
	width: 1580px;
	height: 900px;
	position: absolute;
	transition: z-index 1s linear;
	opacity: 0;
}

.active {
	z-index: 1;
	opacity: 1;
	transition: opacity 500ms linear;
}

.circle {
	position: absolute;
	width: 1580px;
	height: 80px;
	background-color: black;
	z-index: 3;
	bottom: 0px;
	opacity: .6;
}

.circle>ul>li {
	float: left;
	height: 50px;
	width: 50px;
	background-color: cornsilk;
	margin-left: 15px;
	text-align: center;
	line-height: 50px;
	font-size: 30px;
	list-style: none;
	border-radius: 50px;
	cursor: pointer;
}

.circle>ul {
	margin: auto;
	width: 260px;
	margin-top: 15px;
}

.circle>ul:after {
	content: '';
	height: 0;
	display: block;
	clear: both;
}

.circleActive {
	background-color: #008B8B !important;
	color: white;
}

lunbo.js 轮播图的行为部分

let lunbo = {
	reder: function(selector, urls) {
		$(selector).addClass('container');
		for (let i = 1; i <= urls.length; i++) {
			if (i === 1) {
				$(selector).append('<div class="item active" data-index=' + i + '><img src="' + urls[i-1] + '" ></div>');
			} else {
				$(selector).append('<div class="item" data-index=' + i + '><img src="' + urls[i-1] + '" ></div>');
			}
		}
		$(selector).append('<div class="btn" id="pre">&lt;</div><div class="btn next" id="next">&gt;</div>')

		var html = '<div class="circle"><ul>'

		for (let i = 1; i <= urls.length; i++) {
			if (i === 1) {
				html += '<li data-index=1 class="circleActive">1</li>'
			} else {
				html += '<li data-index=' + i + '>' + i + '</li>'
			}
		}
		html += '</ul></div>';
		$(selector).append(html)
	},
	start: function(selector, urls) {
		this.reder(selector,urls);
		$('#next').click(this.goNext.bind(this));
		$('#pre').click(this.goPre.bind(this));
		$('.circle>ul>li').click(function(event) {
			let index = $(event.target).attr('data-index');
			this.go(index);
		}.bind(this))
		
		setInterval(this.goNext.bind(this), 3000);
	},
	next: function(index) {
		index = Number(index);
		if ($('.item').length == index) {
			return 1;
		}
		return index + 1;
	},
	pre: function(index) {
		index = Number(index);
		if (index == 1) {
			return $('.item').length;
		}
		return index - 1;
	},
	go: function(index) {
		var active = $('.active');
		active.removeClass('active');
		$('.item[data-index=' + index + ']').addClass('active');

		var circleActive = $('.circleActive');
		circleActive.removeClass('circleActive');
		$('.circle>ul>li[data-index=' + index + ']').addClass('circleActive');
	},
	goNext: function() {
		var active = $('.active');
		var index = active.attr('data-index');
		this.go(this.next(index));
	},
	goPre: function() {
		var active = $('.active');
		var index = active.attr('data-index');
		this.go(this.pre(index));
	}
}

朝去夜来

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
用JS写轮播图

该轮播图可实现每隔1秒跳转至下一图片，左右两个箭头可以控制图片前后移动，下面的数字圆圈可以实现点击便跳转到相应图片。图片比盒子设定的宽高大也没关系，在CSS中设定了overflow隐藏，溢出部分将不显示。下面是代码：lunbotu.html 轮播图的结构部分<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" co.
复制链接

扫一扫