jq编写轮播图（淡入淡出的效果）

最新推荐文章于 2023-12-14 19:51:15 发布

置顶魏亚强

最新推荐文章于 2023-12-14 19:51:15 发布

阅读量718

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/wyq188945/article/details/103523448

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

大概的效果图如下：
在这里插入图片描述
下面是代码，直接复制，然后替换图片就可以使用(图片放在了最下面)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.banner{
			width: 480px;
			height: 210px;
			margin: 0 auto;			
			position: relative;			
		}
		.img li{
			position: absolute;
			opacity: 0;
		}
		.img li:first-child{			
			opacity: 1;
		}
		.img img{
			height: 210px;
		}
		li{
			list-style: none;
			
		}
		.nextImg{
			position: absolute;
			right: 0px;
			top: 95px;
			background: #000000;
			opacity: 0.5;
			padding: 5px;
			line-height: 14px;
			text-align: center;
			border-radius: 2px;
		}
		.nextImg:hover,.preImg:hover{
			opacity: 1;
		}
		.preImg{
			position: absolute;
			left: 0px;
			top: 95px;
			background: #000000;
			opacity: 0.5;
			padding: 5px;
			line-height: 14px;
			text-align: center;
			border-radius: 2px;
		}
		div>img{
			height: 20px;
		}
		.jumpBtn{
			width: 100px;
			height: 10px;			
			position: absolute;
			left: 190px;
			bottom: 20px;
			z-index: 10;
		}
		.jumpBtn li{
			height: 17px;
			width: 17px;
			margin-left: 8px;
			margin-right: 8px;
			background: white;			
			float: left;
			border-radius: 50%;		
		}
		.jumpBtn li:first-child{
			background: black;
		}
	</style>
	<body>
		<div class="banner">
			<ul class="img">
				<li><img src="img/lunbo1.jpg" alt="" /></li>
				<li><img src="img/lunbo2.jpg" alt="" /></li>
				<li><img src="img/lunbo3.jpg" alt="" /></li>
			</ul>
			<div class="nextImg">
				<img src="img/nexImg.png" alt="" />
			</div>
			<div class="preImg">
				<img src="img/preImg.png" alt="" />
			</div>
			<ul class="jumpBtn">
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>	
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script>
		$(function(){
			//定时器
			var time=null;
			//开始的位置
			var start=0;
			time=setInterval(lunbo,4000);
			function lunbo(){
				if(start<2){
					start++;			
					$(".img li").eq(start-1).stop().animate({"opacity":0},1000);
					$(".img li").eq(start).stop().animate({"opacity":1},1000);	
					//圆点
					$(".jumpBtn li").eq(start).css("background","black");
					$(".jumpBtn li").eq(start).siblings().css("background","white");
				}else{			
					$(".img li").eq(2).stop().animate({"opacity":0},1000);
					$(".img li").eq(0).stop().animate({"opacity":1},1000);
					//圆点
					$(".jumpBtn li").eq(0).css("background","black");
					$(".jumpBtn li").eq(0).siblings().css("background","white");
					start=0;
				}			
			}
			//下一页按钮
			$(".nextImg").click(function(){
				clearInterval(time);
				lunbo();
				time=setInterval(lunbo,4000);
			})
			//上一页按钮
			$(".preImg").click(function(){
				clearInterval(time);
				if(start>0){
					start--;
					$(".img li").eq(start+1).stop().animate({"opacity":0},1000);
					$(".img li").eq(start).stop().animate({"opacity":1},1000);	
					//圆点
					$(".jumpBtn li").eq(start).css("background","black");
					$(".jumpBtn li").eq(start).siblings().css("background","white");
				}else{
					$(".img li").eq(0).stop().animate({"opacity":0},1000);
					$(".img li").eq(2).stop().animate({"opacity":1},1000);
					//圆点
					$(".jumpBtn li").eq(2).css("background","black");
					$(".jumpBtn li").eq(2).siblings().css("background","white");
					start=2;
				}
				time=setInterval(lunbo,4000);
			})
			//圆点的点击事件
			$(".jumpBtn li").each(function(){
				$(this).click(function(){
					clearInterval(time);
					//先去判断该下标和start是否相等
					if($(this).index()==start){						
						console.log(123)
					}else{
						$(this).css("background","black");
						$(this).siblings().css("background","white");							
						$(".img li").eq(start).stop().animate({"opacity":0},1000);
						$(".img li").eq($(this).index()).stop().animate({"opacity":1},1000);
						start=$(this).index();
					}
					time=setInterval(lunbo,4000);
				})
			})
		})
	</script>
</html>

在这里插入图片描述

按钮
这是按钮

魏亚强

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jq编写轮播图（淡入淡出的效果）

大概的效果图如下：下面是代码，直接复制，然后替换图片就可以使用(图片放在了最下面)<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin: ...
复制链接

扫一扫