<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- CSS部分 -->
<style type="text/css">
*{
padding:0;
margin:0;
list-style: none;
text-decoration: none;
}
.carousel{
width: 900px;
height: 540px;
margin:50px auto;
position: relative;
}
.carousel .imgList li{
width: 900px;
height:540px;
position: absolute;
top: 0;
left: 0;
display: none;
}
.carousel .imgList li:first-child{
display: block;
}
.carousel .btns a{
width: 30px;
height: 70px;
position: absolute;
top:50%;
margin-top: -30px;
color:#fff;
background-color: rgba(0,0,0,1);
text-align: center;
}
.carousel .btns a.leftBtn{
left:10px;
}
.carousel .btns a.rightBtn{
right:10px;
}
.carousel .circles{
width: 120px;
height: 20px;
position: absolute;
bottom: 30px;
left:50%;
margin-left: -60px;
}
.carousel .circles ol li{
float: left;
width: 20px;
height: 20px;
margin: 0px 5px;
background-color: #000;
color:#fff;
text-align: center;
}
.carousel .circles ol li.cur{
background-color: yellow;
color:#000;
}
</style>
</head>
<body>
<!-- HTML部分 -->
<div class="carousel" id="carousel">
<div class="imgList" id="imgList">
<ul>
<li>
<a href="javascript:void(0);">
<img src="http://iph.href.lu/900x540?text=slider_01" alt="">
</a>
</li>
<li>
<a href="javascript:void(0);">
<img src="http://iph.href.lu/900x540?text=slider_02" alt="">
</a>
</li>
<li>
<a href="javascript:void(0);">
<img src="http://iph.href.lu/900x540?text=slider_03" alt="">
</a>
</li>
<li>
<a href="javascript:void(0);">
<img src="http://iph.href.lu/900x540?text=slider_04" alt="">
</a>
</li>
</ul>
</div>
<div class="btns">
<a href="javascript:void(0);" class="leftBtn" id="leftBtn">上一页</a>
<a href="javascript:void(0);" class="rightBtn" id="rightBtn">下一页</a>
</div>
<div class="circles" id="circles">
<ol>
<li class="cur">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</div>
<!-- JS部分 -->
<script type="text/javascript" src ="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
// 获取元素
var $carousel = $("#carousel");
var $imgLists = $("#imgList ul li");
var $leftBtn = $("#leftBtn");
var $rightBtn = $("#rightBtn");
var $circles = $("#circles ol li");
var amount = $imgLists.length;
// 定时器
var timer = setInterval(rightFun, 2000);
// 鼠标进入大盒子关闭定时器
$carousel.mouseenter(function(){
clearInterval(timer);
});
// 鼠标离开重新开启定时器
$carousel.mouseleave(function(){
// 设表先关
clearInterval(timer);
timer = setInterval(rightFun, 2000);
});
// 信号量
var index = 0;
// 右按钮的点击事件
$rightBtn.click(rightFun);
// 右按钮的声明
function rightFun(){
// 防流氓
if($imgLists.is(":animated")){
return;
}
// 老图淡出
$imgLists.eq(index).fadeOut(500);
// 信号量改变
index ++;
// 后验证
if(index > amount - 1){
index = 0;
}
// 新图淡入
$imgLists.eq(index).fadeIn(500);
// 小圆点改变
$circles.eq(index).addClass("cur").siblings().removeClass("cur");
}
// 左按钮点击事件
$leftBtn.click(function(){
// 当图片不运动时,执行内部函数
if(!$imgLists.is(":animated")){
// 老图淡出
$imgLists.eq(index).fadeOut(500);
// 信号量改变
index --;
if(index < 0){
index = amount - 1;
}
// 新图淡入
$imgLists.eq(index).fadeIn(500);
// 小圆点改变
$circles.eq(index).addClass("cur").siblings().removeClass("cur");
}
});
// 小圆点的事件
$circles.mouseenter(function(){
// 老图淡出
$imgLists.eq(index).stop(true).fadeOut(500);
// 信号量改变
index = $(this).index();
// 新图淡入
$imgLists.eq(index).stop(true).fadeIn(500);
// 小圆点改变
$(this).addClass("cur").siblings().removeClass("cur");
});
</script>
</body>
</html>
jQuery轮播图 - 呼吸式 -
最新推荐文章于 2020-06-03 17:19:53 发布