一个简单地jqery图片轮播实例_jq简单轮播图-优快云博客

本文详细介绍了如何使用HTML、CSS和JavaScript实现图片轮播图，并通过小圆点进行导航。提供了完整的代码样例，便于开发者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="jhf" content="轮播">
  <meta name="Keywords" content="图片轮播">
  <meta name="Description" content="">
  <title>Banner 轮播图</title>
  <style>
	  *{
		margin:0;
		padding:0px;
	  }
	.con{
		width:100%;
		height:400px;
		
		position:relative;
	}
	.con .pic{
		width:100%;
		height:400px;
		
		overflow:hidden;
	}
	.con .xyd{
		width:200px;
		height:30px;
		position:absolute;
		bottom:0px;
		left:600px;
	}
	.con .xyd ul li{
		width:16px;
		height:16px;
		
		list-style-type:none;
		float:left;
		margin:5px;
		border-radius:50px;
		background:white;
		cursor:pointer;
	}
	.con .xyd ul li.ac{
		background:blue;
		}
  </style>
 </head>
 <body>
	<div class="con">
	<!--banner 图片开始-->
		<div class="pic">
			<img src="images/1.jpg " />
			<img src="images/2.jpg " />
			<img src="images/3.jpg " />
			<img src="images/4.jpg " />
			<img src="images/5.jpg " />
			<img src="images/6.jpg " />
		</div>
		<!--banner 图片结束-->
		<!--小圆点开始-->
		<div class="xyd">
			<ul>
				<li class="ac"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<!--小圆点结束-->
	    <script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/responsiveslides.min.js"></script>
		<script type="text/javascript" src="js/responsiveslides.js"></script>
		<script type="text/javascript">
			var i=0
			$(".con .xyd ul li").click(function()
			{
				
				i=$(this).index();
				$(this).addClass("ac").siblings().removeClass("ac"); //点击时将小点里的绿色重新赋给你点击的点
				$(".con .pic img").eq(i).fadeIn(400).siblings().fadeOut(400);//图片选择跳转
			});
			function jump()
			{	
				i++
				if(i>5)
				i=0
				$(".xyd ul li").eq(i).addClass("ac").siblings().removeClass("ac");
				$(".con .pic img").eq(i).fadeIn(400).siblings().fadeOut(400);
			}
			setInterval("jump()",3700);
		</script>
		<!--
		1、如何在浏览器中添加内容
		2、div便签布局结构
		3、css层叠样式给div盒子添加宽高
		-->
	</div>
 </body>
</html>

如果需要相关素材和代码，请到我的csdn下载。群殴已经上传到资源管理！ http://download.youkuaiyun.com/detail/pro_jhf/9165909