当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery呼吸轮播图代码实例

jQuery呼吸轮播图代码实例

2018年10月19日  | 移动技术网IT编程  | 我要评论

jquery呼吸轮播图代码实例

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>document</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		ul, ol {
			list-style: none;
		}
		a {
			text-decoration: none;
		}
		.carousel {
			width: 900px;
			height: 540px;
			border: 1px solid #000;
			margin: 50px auto;
			position: relative;
		}
		.carousel .imgs ul li {
			/*呼吸 所有图片摞在一起*/
			width: 900px;
			height: 540px;
			position: absolute;
			left: 0px;
			top: 0px;
			display: none;
		}
		.carousel .imgs ul li:first-child {
			display: block;
		}
		.carousel .btns a {
			position: absolute;
			top: 50%;
			margin-top: -30px;
			width: 30px;
			height: 60px;
			background-color: rgba(0,0,0,.3);
			color: #fff;
			font-size: 30px;
			text-align: center;
			line-height: 60px;
		}
		.carousel .btns a.rightbtn {
			right: 0px;
		}
		.carousel .circles {
			position: absolute;
			width: 200px;
			height: 20px;
			left: 50%;
			margin-left: -100px;
			bottom: 30px;
			overflow: hidden;
		}
		.carousel .circles ol {
			width: 210px;
		}
		.carousel .circles ol li {
			float: left;
			width: 20px;
			height: 20px;
			margin-right: 10px;
			background-color: #eee;
			text-align: center;
			line-height: 20px;
			color: #333;
			border-radius: 10px;
			cursor: pointer;
		}
		.carousel .circles ol li.cur {
			background-color: yellow;
		}


	</style>
</head>
<body>
	<p class="carousel" id="carousel">
		<p class="imgs">
			<ul>
				<li><img src="images/aoyun/0.jpg" alt=""></li>
				<li><img src="images/aoyun/1.jpg" alt=""></li>
				<li><img src="images/aoyun/2.jpg" alt=""></li>
				<li><img src="images/aoyun/3.jpg" alt=""></li>
				<li><img src="images/aoyun/4.jpg" alt=""></li>
				<li><img src="images/aoyun/5.jpg" alt=""></li>
				<li><img src="images/aoyun/6.jpg" alt=""></li>
			</ul>
		</p>
		<p class="btns">
			<a href="javascript：void(0);" class="leftbtn" id="leftbtn">&lt;</a>
			<a href="javascript：void(0);" class="rightbtn" id="rightbtn">&gt;</a>
		</p>
		<p class="circles" id="circles">
			<ol>
				<li class="cur">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
			</ol>
		</p>
	</p>


	<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
	<script type="text/javascript">
		// 保存元素
		var $carousel = $("#carousel");
		// 获取li们
		var $imglis = $("#carousel .imgs ul li");
		// 获取小圆点们
		var $circles = $("#circles ol li");
		var $leftbtn = $("#leftbtn");
		var $rightbtn = $("#rightbtn");
		// 数量
		var amount = $circles.length;
		// console.log(amount);


		// 定时器
		var timer = setinterval(rightbtnfun, 3000);
		// 鼠标进入carousel 停止
		$carousel.mouseenter(function() {
			// 停止timer
			clearinterval(timer);
		});
		// 鼠标离开重新开启
		$carousel.mouseleave(function() {
			// 设表先关
			clearinterval(timer);
			// 重新开启
			timer = setinterval(rightbtnfun, 3000);
		});


		// 信号量
		var idx = 0;
		// 右按钮点击事件
		// 左右按钮防流氓 图片不运动才接收新任务
		// 可以将匿名函数提取 将函数名书写在小括号
		$rightbtn.click(rightbtnfun);
		// rightbtnfun();
		// 声明右按钮点击事件
		function rightbtnfun() {
			// 图片在运动，什么事情都不做
			if($imglis.is(":animated")) {
				return;
			}
			// 图片不运动，才会执行这些语句
			// 老图消失
			$imglis.eq(idx).fadeout(800);
			// 信号量改变
			idx ++;
			// 验证
			if(idx > amount - 1) {
				idx = 0;
			}
			// 新图淡入
			$imglis.eq(idx).fadein(1000);
			// 小圆点改变
			$circles.eq(idx).addclass("cur").siblings().removeclass("cur");
		}


		// 左按钮点击事件
		$leftbtn.click(function() {
			// 图片在不运动才接收新任务
			if(!$imglis.is(":animated")) {
				// 老图淡入
				$imglis.eq(idx).fadeout(800);
				// 信号量改变
				idx --;
				if(idx < 0) {
					idx = amount - 1;
				}
				// 新图淡入
				$imglis.eq(idx).fadein(1000);
				// 小圆点改变
				$circles.eq(idx).addclass("cur").siblings().removeclass("cur");
			}
		});






		// 小圆点鼠标进入事件
		// 防流氓 立即触发
		$circles.mouseenter(function() {
			// 老图淡出
			$imglis.eq(idx).stop(true).fadeout(800);
			// 信号量改变 $(this)触发 的小圆点
			idx = $(this).index();
			// 新图淡入
			$imglis.eq(idx).stop(true).fadein(1000);
			// 小圆点改变
			$(this).addclass("cur").siblings().removeclass("cur");
		});
	</script>
</body>
</html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网