jQuery--图片轮播

最新推荐文章于 2024-09-13 23:32:49 发布

meiziluleyiguan

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量471

点赞数

分类专栏： jQuery 文章标签： jquery 前端图片轮播

本文链接：https://blog.csdn.net/meiziluleyiguan/article/details/53054810

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍用jQuery实现图片轮播的效果，所谓图片轮播就是将多张图片以滚动轮播的方式进行展示。

效果图：

点击左右按钮进行轮播，下方小圆点也可以点击进行轮播。‘

其原理图如下：：

代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>jQuery——水平轮播</title>
	<style type="text/css">
		*{
			margin:0;
			padding: 0;
		}
		#container{
			width:605px;
			height:284px;
			border:1px solid #000;
			/*展示的盒子水平居中*/
			margin:50px auto;
			position: relative;
			/*超出部分隐藏*/
			overflow: hidden;
		}
		#box{
			height:284px;
			position: absolute;
			left: 0;
			top:0;
		}
		.topic{
			width:605px;
			height:284px;
			/*使得所有图片在一行显示*/
			float: left;
		}
		#pages{
			width:100%;
			height:20px;
			padding:5px 0;
			position: absolute;
			left: 0;
			bottom:0;
		}
		#pages div{
			width:20px;
			height:20px;
			border-radius: 50%;
			background: #fff;
			opacity: 0.3;
			float: left;
			margin-left: 10px;
		}
		#pages div.curr{
			background: #fb6705;
			opacity: 1;
		}
		#prev,#next{
			width:50px;
			height: 150px;
			background:#000;
			font-size:34px;
			position: absolute;
			top:0;
			bottom:0;
			margin:auto 0;
			color: #fff;
			opacity: 0.8;
			line-height: 150px;
			text-align: center;
			border-radius: 0 10px 10px 0;
		}
		#next{
			right:0;
			border-radius: 10px 0 0 10px;
		}
		#blogaddress{
			position: absolute;
			left:50%;
			bottom:10%;
		}
		#blogaddress a{
			/*text-decoration: none;*/
			color:#000;
		}
	</style>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			$(window).on("load",function(){
					// 获取所有的图片盒子
				var $topics = $(".topic"),
					// 获取一张图片的宽度
					imgwidth = $topics.width(),
					// 获取盒子的总长度
					len = $topics.length,
					// 下一张图片的索引
					nextIndex = 1,
					// 计时器
					timer = null;
				// 包裹图片的盒子(#box)总长度
				$("#box").width(imgwidth*len);
				// 自动轮播
				// timer = setInterval(move,1500);
				// 动态添加小圆点
				$.each($(".topic"),function(index,element){
					// 创建小圆点div并添加至#pages中
					$("#pages").append("<div></div>");
					// 给第一个小圆点添加样式
					$("#pages :first-child").addClass("curr");
					// 使用data()方法给每个小圆点添加一个index属性，方便之后的使用
					$("#pages :last-child").data("index",index);
				});
				// 点击小圆点运动
				$("#pages div").on("click",function(){
					// 清除计时器
					clearInterval(timer);
					// 将此时点击的小圆点存放的index值赋值给nextIndex
					nextIndex = $(this).data('index');
					move();
					timer = setInterval(move,1500);
				});
				// 上一张
				$("#prev").on("click",function(){
					clearInterval(timer);
					//点击上一张的时候
					nextIndex -=2;
					console.log(nextIndex);
					if(nextIndex<0){
						nextIndex = nextIndex+len;
					}
					move();
					timer = setInterval(move,1500);
				});
				// 下一张
				$("#next").on("click",function(){
					clearInterval(timer);
					move();
					timer = setInterval(move,1500);
				});
				// 运动函数
				function move(){
					// 改变左边位置
					var _left = imgwidth * -nextIndex;
					// 小圆点改变样式
					$.each($("#pages div"),function(index,element){
						// 清除所有小圆点的curr样式
						$("#pages div").eq(index).removeClass("curr");
					});
					// 给当前的添加curr样式
					$("#pages div").eq(nextIndex).addClass("curr");
					nextIndex++;
					if(nextIndex>=len){
						nextIndex = 0;
					}
					// 运动
					$("#box").animate({
						"left":_left,
					});
				}
			});
		});
	</script>
</head>
<body>
	<div id="container">
		<div id="box">
			<div class="topic">
				<img src="img/img1.jpg">
			</div>
			<div class="topic">
				<img src="img/img2.jpg">
			</div>
			<div class="topic">
				<img src="img/img3.jpg">
			</div>
			<div class="topic">
				<img src="img/img4.jpg">
			</div>
		</div>
		<!-- 小圆点的存放位置 -->
		<div id="pages"></div>
		<!-- 上一张 -->
		<div id="prev"><</div>
		<!-- 下一张 -->
		<div id="next">></div>
	</div>
	<div id="blogaddress">
		更多分享:<a href="http://blog.csdn.net/meiziluleyiguan">
			http://blog.csdn.net/meiziluleyiguan
		</a>
	</div>
</body>
</html>

注：需自己引入jQuery类库以及图片。