jQuery呼吸轮播图代码实例
程序员文章站
2022-08-09 16:03:52
jquery呼吸轮播图代码实例
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"><</a>
<a href="javascript：void(0);" class="rightbtn" id="rightbtn">></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> 上一篇： jquery 无限级联菜单案例分享
下一篇： js数据类型+运算符