jQuery呼吸轮播图制作原理详解
作者：周帅帅Love
这篇文章主要为大家详细介绍了jQuery呼吸轮播图制作原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jQuery呼吸轮播图制作原理的具体过程，供大家参考，具体内容如下
轮播图：carousel
呼吸轮播图变种布局重点：所有的图片摞一起。
jquery选择元素的能力非常好，但是我们习惯将用到的元素，提前保存到变量。通常我们使用id选中元素。一般我们以$box。
左右按钮防流氓的策略：当图片运动时，不进行任何操作。is()
小圆点的防流氓的策略：立即响应新事件。stop(true)
注意：使用代码时将图片更换，以及需要引入jquery库。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
}
#carousel {
position: relative;
width: 900px;
height: 540px;
border: 1px solid #000;
margin: 50px auto;
}
/*呼吸轮播图布局关键是所有图片落在一起*/
#carousel .imgs ul li {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: none;
}
#carousel .imgs ul li:first-child {
display: block;
}
.btns a {
position: absolute;
width: 30px;
height: 60px;
top: 50%;
margin-top: -30px;
text-decoration: none;
background-color: rgba(0, 0, 0, .5);
line-height: 60px;
text-align: center;
font-size: 20px;
color: #fff;
}
.btns a:first-child {
left: 10px;
}
.btns a:last-child {
right: 10px;
}
#carousel .circles {
position: absolute;
width: 200px;
height: 20px;
left: 50%;
margin-left: -100px;
bottom: 30px;
}
#carousel .circles ol {
width: 210px;
}
#carousel .circles ol li {
float: left;
width: 20px;
height: 20px;
margin-right: 10px;
background-color: blue;
line-height: 20px;
text-align: center;
border-radius: 20px;
}
#carousel .circles ol li.cur {
background-color: orange;
}
</style>
</head>
<body>
<div id="carousel">
<div class="imgs" id="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>
</div>
<div class="btns">
<a href="#" id="leftBtn"><</a>
<a href="#" id="rightBtn">></a>
</div>
<div 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>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
// 获取元素
var $leftBtn = $("#leftBtn");
var $rightBtn = $("#rightBtn");
var $imgs = $("#imgs ul li");
var $circles = $("#circles ol li");
var $carousel = $("#carousel");
// 定义length
var length = $imgs.length;
// 定义信号量
var idx = 0;
// 开启定时器
var timer = setInterval(change, 2000);
// 鼠标移入停止定时器
$carousel.mouseenter(function() {
// 清除定时器
clearInterval(timer);
})
// 鼠标离开从新开启定时器
$carousel.mouseleave(function() {
// 设表先关
clearInterval(timer);
// 重新赋值timer
timer = setInterval(change, 2000);
})
// 右按钮事件
$rightBtn.click(change);
function change() {
// 防流氓
if ($imgs.is(":animated")) {
return;
}
// 当前图片消失
$imgs.eq(idx).fadeOut(600);
// 信号量改变
idx++;
// 边界判定
if (idx > length - 1) {
idx = 0;
}
// 下一张图片淡入
$imgs.eq(idx).fadeIn(600);
// 当前小圆点要加cur
$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
}
// 左按钮事件
$leftBtn.click(function() {
// 防流氓
if (!$imgs.is(":animated")) {
// 当前图片消失
$imgs.eq(idx).fadeOut(600);
// 信号量改变
idx--;
// 边界判定
if (idx < 0) {
idx = length - 1;
}
// 下一张图片淡入
$imgs.eq(idx).fadeIn(600);
// 当前小圆点加cur
$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
}
})
// 小圆点事件
$circles.mouseenter(function() {
// 当前图片消失
$imgs.eq(idx).stop(true).fadeOut(600);
// 改变信号量
idx = $(this).index();
// 下一张图片出现
$imgs.eq(idx).stop(true).fadeIn(600);
// 当前小圆点加cur
$(this).addClass("cur").siblings().removeClass("cur");
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。