js轮播图简单方式

最新推荐文章于 2022-08-29 17:10:39 发布

猫儿念你

最新推荐文章于 2022-08-29 17:10:39 发布

阅读量136

点赞数

分类专栏：前端学习-原创前端学习-转载文章标签： css js html

本文链接：https://blog.csdn.net/qq_35779070/article/details/106740604

版权

前端学习-原创同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

前端学习-转载

3 篇文章 0 订阅

订阅专栏

js轮播图简单方式

这个不记得是转载的还是自己写的了，如果有人看见原博主的文章了，麻烦评论放个原博主链接，谢谢！！！

直接上代码吧

<script type="text/javascript">	
	// 利用的是fadein和fadeout的原理，然后所有的图片在一排显示。
	$(function(){		
		// 设置初始索引为0
		var step = 0;
		// 设置当前列表中第一张图片显示，其余隐藏
		$(".sliders .item:not(:first-child)").hide();
		// 改变图片方法
		 function changeImg(a){
			 // 设置当前显示的图片出去
			 $('.sliders .item').filter

(":visible").fadeOut(500);
			 // 进入
			 $('.sliders .item').eq(a).fadeIn

(1000);
		 }	
		
			
		//点击左按钮切换
		$('.prev').click(function(){
			step--;
			if(step === -1){
				step = 3;
			}
			changeImg(step);
		})
		
		//点击右按钮切换
		$('.next').click(function(){
			step++;
			if(step === 4){
				step = 0;
			}
			changeImg(step);
		})
	})
</script>

没有加js代码之前

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.clearfix::after{
				display: block;
				content: "";
				clear: both;
			}

			img {
				width: 300px;
			}

			li {
				list-style: none;
				float: left;
			}
			.sliders{
				position: relative;
			}
			
			.btn {
				width: 20px;
				height: 20px;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div class="container" style="background-color: #d6ebde;width: 500px;margin: auto;height: 300px;">
			<div class="sliders ">
				<img src="img/left.png" class="prev btn">
				<img src="img/right.png" class="next btn">
				<ul class="clearfix" style="display: flex;">
					<li class="item"><img src="img/banback.jpeg" alt=""></li>
					<li class="item"><img src="img/banback.jpeg" alt=""></li>
					<li class="item"><img src="img/banback.jpeg" alt=""></li>
					<li class="item"><img src="img/banback.jpeg" alt=""></li>
					<li class="item"><img src="img/banback.jpeg" alt=""></li>
				</ul>
			
			</div>

		</div>
	</body>
</html>

加了js代码之后：更改了一些css样式

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.clearfix::after{
				display: block;
				content: "";
				clear: both;
			}

			img {
				width: 300px;
				height: 100px;
			}

			li {
				list-style: none;
				float: left;
			}
			.sliders{
				position: relative;
				height: 100px;
			}
			
			.btn {
				width: 20px;
				height: 20px;
				position: absolute;
				top: 50%;
			}
			
			.btn.next{
				right: 0;
			}
		</style>
	</head>
	<body>
		<div class="container" style="background-color: #d6ebde;width: 500px;margin: auto;height: 300px;">
			<div class="sliders" >
				<img src="img/left.png" class="prev btn">
				<img src="img/right.png" class="next btn">
				<ul class="clearfix" style="display: flex;width: 300px;margin: auto;height: 100%;">
					<li class="item"><img src="img/banback.jpeg" alt=""></li>
					<li class="item"><img src="img/banback.jpeg" alt=""></li>
					<li class="item"><img src="img/banback.jpeg" alt=""></li>
					<li class="item"><img src="img/banback.jpeg" alt=""></li>
					<li class="item"><img src="img/banback.jpeg" alt=""></li>
				</ul>
			
			</div>

		</div>
	</body>
</html>
<script src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	// 当图片在同一个位置时可以用的轮播
	$(function() {
		// 设置初始索引为0
		var step = 0;
		// 设置当前列表中第一张图片显示，其余隐藏
		$(".sliders .item:not(:first-child)").hide();
		// 改变图片方法
		function changeImg(a) {
			// 设置当前显示的图片出去
			$('.sliders .item').filter(":visible").fadeOut(500);
			// 进入
			$('.sliders .item').eq(a).fadeIn(1000);
		}


		//点击左按钮切换
		$('.prev').click(function() {
			step--;
			if (step === -1) {
				step = 3;
			}
			changeImg(step);
		})

		//点击右按钮切换
		$('.next').click(function() {
			step++;
			if (step === 4) {
				step = 0;
			}
			changeImg(step);
		})
	})
</script>

显示效果：
轮播图效果

猫儿念你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js轮播图简单方式

js轮播图简单方式直接上代码吧<script type="text/javascript"> // 当图片在同一个位置时可以用的轮播 $(function(){ // 设置初始索引为0 var step = 0; // 设置当前列表中第一张图片显示，其余隐藏 $(".sliders .item:not(:first-child)").hide(); // 改变图片方法 function changeImg(a){ // 设置当前显示的图片
复制链接

扫一扫