- 呼吸式{蒙版} - 的不同之处
- CSS部分(改动)
.carousel{
background-color: rgba(0,0,0,0.8);
}
- JS部分(改动)
// 左按钮点击事件 {右按钮也要改}
$leftBtn.click(function(){
if($imgLists.is(":animated")){
return;
}
// 新图的淡入和信号量的改变写在回调函数中
// 老图淡出
$imgLists.eq(index).fadeOut(500,function(){
// 信号量
index --;
if(index < 0){
index = amount - 1;
}
// 新图淡入
$imgLists.eq(index).fadeIn(500);
// 小圆点的改变
$circles.eq(index).addClass("cur").siblings().removeClass("cur");
});
});
JQ传统轮播图 - 呼吸式{蒙版} -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding:0;
margin:0;
list-style: none;
text-decoration: none;
}
.carousel{
width: 900px;
height: 540px;
margin:50px auto;
position: relative;
background-color: rgba(0,0,0,0.8);
}
.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>
<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>
<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,function(){
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")){
return;
}
$imgLists.eq(index).fadeOut(500,function(){
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>