jQuery呼吸轮播图制作原理详解_jquery
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持3399IT网。
本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com
