jQuery + javascript 轮播图

最新推荐文章于 2024-08-27 19:30:26 发布

孤身不觉晚

最新推荐文章于 2024-08-27 19:30:26 发布

阅读量124

点赞数 2

文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_40043424/article/details/109769053

版权

项目demo样式如下，具体我也不清楚有什么效果，看吧…

在这里插入图片描述
效果就是这样子的，因为也是闲的无聊，就想着回忆一下Jquery和原生Js,代码粗制滥造，见笑见笑。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
			.content {
				height: 30vh;
			}

			.carousel {
				height: 100px;
				display: flex;
				position: absolute;
				left: 0;
				top: 0;
			}

			.carousel img {
				height: 100px;
				width: 178px;
			}

			.box {
				width: 178px;
				height: 100px;
				position: relative;
				overflow: hidden;
				margin: auto;
				z-index: 100;
			}

			ul {
				width: 178px;
				margin: auto;
				height: 20px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			li {
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: #3F3F3F;
				list-style: none;
				margin: 0 3px;
			}

			li:nth-child(1) {
				background: red;
			}
			.next{
				display: none;
				justify-content: center;
				align-items: center;
				width: 15px;
				height: 25px;
				background: #bebebe;
				color: #FFFFFF;
				font-size: 20px;
				cursor: pointer;
			}
			.box:hover .next{
				display: flex;
			}
			.one{
				position: absolute;
				left: 0;
				top:40%;
			}
			.two{
				position: absolute;
				right: 0;
				top:40%;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="box">
				<div class="carousel">
					<img src="img/李白.jpg">
					<img src="img/武则天.jpg">
					<img src="img/狄仁杰.jpg">
					<img src="img/诸葛亮.jpg">
					<img src="img/韩信.jpg">
				</div>
				<!-- 点击左右模块 -->
				<span class="next one" onclick="move('left')">&lt;</span>
				<span class="next two" onclick="move('right')">&gt;</span>
			</div>
			<ul>
				<li onclick="int(0)"></li>
				<li onclick="int(1)"></li>
				<li onclick="int(2)"></li>
				<li onclick="int(3)"></li>
				<li onclick="int(4)"></li>
			</ul>
		</div>
	</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
	let index = $('.carousel img').length;//当前图片数量
	let num = 0;//滚动到第几张
	console.log(index)
	$('.carousel').css('width', 178 * index + 'px');
	let viewpager = setInterval(() => {
		num++;
		if (num <= index - 1) {
			$('.carousel').css('left', -1 * 178 * num + 'px');
			for (var i = 0; i < $('li').length; i++) {
				// console.log($('li')[i])
				$('li')[i].style.background = '#3F3F3F';
			}
			$('li')[num].style.background = 'red';
		} else {
			num = 0;
			$('.carousel').css('left', -1 * 178 * num + 'px');
			for (var i = 0; i < $('li').length; i++) {
				$('li')[i].style.background = '#3F3F3F';
			}
			$('li')[num].style.background = 'red';
		}
	}, 2000);
// 点击轮播灯事件
	function int(a) {
		clearInterval(viewpager);
		$('.carousel').css('left', -1 * 178 * a + 'px');
		for (var i = 0; i < $('li').length; i++) {
			$('li')[i].style.background = '#3F3F3F';
		}
		$('li')[a].style.background = 'red';
		if(a <=  $('.carousel img').length-1){
			num = a;
		}else{
			num = 0;
		}
		console.log(num)
		 viewpager = setInterval(() => {
			num++;
			if (num <= index - 1) {
				$('.carousel').css('left', -1 * 178 * num + 'px');
				for (var i = 0; i < $('li').length; i++) {
					// console.log($('li')[i])
					$('li')[i].style.background = '#3F3F3F';
				}
				$('li')[num].style.background = 'red';
			} else {
				num = 0;
				$('.carousel').css('left', -1 * 178 * num + 'px');
				for (var i = 0; i < $('li').length; i++) {
					$('li')[i].style.background = '#3F3F3F';
				}
				$('li')[num].style.background = 'red';
			}
		}, 2000);
	}
	// 鼠标移动到图片事件
	$('.box').mouseenter(()=>{
			clearInterval(viewpager);
	})
	//鼠标移动开事件
	$('.box').mouseleave(()=>{
		viewpager = setInterval(() => {
			num++;
			if (num <= index - 1) {
				$('.carousel').css('left', -1 * 178 * num + 'px');
				for (var i = 0; i < $('li').length; i++) {
					// console.log($('li')[i])
					$('li')[i].style.background = '#3F3F3F';
				}
				$('li')[num].style.background = 'red';
			} else {
				num = 0;
				$('.carousel').css('left', -1 * 178 * num + 'px');
				for (var i = 0; i < $('li').length; i++) {
					$('li')[i].style.background = '#3F3F3F';
				}
				$('li')[num].style.background = 'red';
			}
		}, 2000);
	})
	// 点击左滑右滑
	function move(e){
		if(e == 'left'){
				num--;
				if (num >= 0) {
					$('.carousel').css('left', -1 * 178 * num + 'px');
					for (var i = 0; i < $('li').length; i++) {
						// console.log($('li')[i])
						$('li')[i].style.background = '#3F3F3F';
					}
					$('li')[num].style.background = 'red';
				} else {
					num = index - 1 ;
					$('.carousel').css('left', -1 * 178 * num + 'px');
					for (var i = 0; i < $('li').length; i++) {
						$('li')[i].style.background = '#3F3F3F';
					}
					$('li')[num].style.background = 'red';
				}
		}else{
			num++;
			if (num <= index - 1) {
				$('.carousel').css('left', -1 * 178 * num + 'px');
				for (var i = 0; i < $('li').length; i++) {
					$('li')[i].style.background = '#3F3F3F';
				}
				$('li')[num].style.background = 'red';
			} else {
				num = 0 ;
				$('.carousel').css('left', -1 * 178 * num + 'px');
				for (var i = 0; i < $('li').length; i++) {
					$('li')[i].style.background = '#3F3F3F';
				}
				$('li')[num].style.background = 'red';
			}
		}
	}
</script>