呼吸轮播特效源码

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jQuery.min.js"></script>
	<style>
	*{
	margin: 0;
	padding: 0;
	}
	ul,li{
	list-style: none;
	}
	#wrap{
	width: 735px;
	height: 350px;
	margin: 0 auto;
	background:0;
	position: relative;
	overflow: hidden;
	}
	#wrap ul{
	height: 350px;
	position: absolute;
	left:0;
	top:0;
	}
	#wrap ul li{
	position: absolute;
	top:0;
	left:0;
	width: 735px;
	height: 350px;
	}
	#wrap ul li img{
	width: 735px;
	height: 350px;
	}
	#wrap ol{
	position: absolute;
	bottom: 20px;
	z-index: 20;
	}
	#wrap ol li{
	float:left;
	width: 15px;
	height: 15px;
	background-color: yellow;
	border-radius: 50%;
	margin-right: 15px;
	cursor:pointer;
	}
	#wrap ol li.active{
	background: blue;
	}
	#btnArr{
	width:100%;
	height: 40px;
	position: absolute;
	top:50%;
	z-index: 20;

	}
	#leftBtn,#rightBtn{
	width: 20px;
	height: 40px;
	text-align: center;
	background: #ccc;
	position: absolute;
	font-family: '宋体';
	font-size:25px;
	line-height: 39px;
	}
	#rightBtn{
	right: 0px;
	}
	</style>
	</head>
	<body>
	<div id="wrap">
	<!-- ul>li*3>a>img -->
	<ul id="ul">
	<li><a href="#"><img src="img/14.jpg" alt=""></a></li>
	<li><a href="#"><img src="img/6.jpg" alt=""></a></li>
	<li><a href="#"><img src="img/7.jpg" alt=""></a></li>
	<li><a href="#"><img src="img/8.jpg" alt=""></a></li>
	<li><a href="#"><img src="img/9.jpg" alt=""></a></li>
	</ul>
	<ol>
	<li class="active"></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	</ol>
	<div id="btnArr">
	<div id="leftBtn"><</div>
	<div id="rightBtn">></div>
	</div>
	</div>

	<script>
	$(function(){
	//设置ul的宽度
	// $('#wrap ul').css('width',$('#wrap ul li').eq(0).width()*$('#wrap ul li').length);
	$('#wrap ul li').eq(0).css({'zIndex':10});

	var num =0;

	//排序，显示当前图片和小方块
	function show(){
	$('#wrap ul li').eq(num).animate({'opacity':1,"z-index":10}).siblings('li').animate({'opacity':0,'z-index':10-num});
	//当前加类名，其余的删除
	$("#wrap ol li").eq(num).addClass('active').siblings('li').removeClass('active');
	}

	//自动轮播
	function autoplay(){
	num++;
	if(num>$('#wrap ul li').length-1){
	num = 0;
	}
	//显示第一张
	show();
	}

	//设置定时器轮播开始
	var timer = setInterval(function(){
	autoplay();
	},1000)

	//点击右侧按钮
	$('#rightBtn').click(function(){
	autoplay();
	})

	//点击左侧按钮
	$('#leftBtn').click(function(){
	num--;
	if(num<0){
	num = $('#wrap ul li').length-1;
	}
	show();
	})
	//鼠标移上去，清除定时器显示按钮
	$('#wrap').mouseover(function(){
	$('#btnArr').show();
	clearInterval(timer);
	})
	//鼠标移出，重新设置定时器隐藏按钮
	$('#wrap').mouseout(function(){
	$('#btnArr').hide();
	timer = setInterval(autoplay,1000);
	})

	//鼠标经过小方块
	//绑定事件
	//排他思想
	$('#wrap ol li').click(function(){
	if(!$('#wrap ul').is(':animated')){//ul如果没有处在动画的状态
	var ind = $('#wrap ol li').index(this);//获取选中li的角标
	//当前的透明度为1 z-index为15
	//其他的为0 z-index为10-ind
	$('#wrap ul li').eq(ind).animate({'opacity':1,"z-index":10}).siblings('li').animate({'opacity':0,'z-index':10-ind});
	//当前加类名，其余的删除
	$(this).addClass('active').siblings('li').removeClass('active');
	}
	})


	})

	//设置定时器
	// timer = setInterval(function (){
	// $('#rightBtn').click();
	// },3000);

	</script>
	</body>
	</html> 效果如下:

来源：https://www.cnblogs.com/zykzyk/p/11390786.html

标签

num

轮播