jquery实现呼吸轮播效果
作者：weixin_43700362
这篇文章主要为大家详细介绍了jquery实现呼吸轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jquery实现呼吸轮播效果的具体代码，供大家参考，具体内容如下
大概思路：
呼吸轮播就是图片淡入淡出轮播。
div（设置相对定位）里存放ul，li不需要float：left，设置绝对定位即可。left：0，top：0。
此时不需要在所有图片后面补假0.
div里还包括左右按钮，下面小圆点，通过绝对定位，把它们定位到合适位置就好。
设置index为0，点击右按钮时，当前图片淡出，index++，当图片为最后一个的时候，index设置为0，新图片淡入。下面小圆点对应变色。
左按钮思路大致相同。
下面小图片点击的时候，如果点击的和当前显示的index相同，则什么事情都不需要做。
点击其他小圆点的时候，旧的图片淡出，把当前小圆点的index赋值给全局变量index，新图片淡入。
被点击的小圆点变色，其兄弟元素仍然为最初的颜色。
程序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
margin:0;
padding:0;
}
.big{
width:560px;
height:300px;
position: relative;
margin:200px auto;
border:10px solid red;
}
.big .move{
width:5600px;
height:300px;
position: absolute;
left:0;
top:0;
}
.big .move li{
/*float: left;*/
list-style: none;
display: none;
position: absolute;
top:0;
left:0;
}
.big ul .first{
display: block;
}
img{
width:560px;
height:300px;
}
.btn div{
width:40px;
height:60px;
background: red;
position: absolute;
top:50%;
margin-top:-30px;
}
.rightbtn{
right:0;
}
.circle{
position: absolute;
left:0px;
bottom:0px;
width:200px;
height:30px;
}
.circle ul{
/*overflow: hidden;*/
list-style: none;
float: left;
}
.circleUl li{
background: white;
float: left;
margin-right:10px;
width:20px;
height:20px;
border-radius:50%;
}
</style>
<body>
<div class="big">
<ul class="move">
<li class="first"> <img src="img/0.jpg" alt=""> </li>
<li> <img src="img/1.jpg" alt=""> </li>
<li> <img src="img/2.jpg" alt=""> </li>
<li> <img src="img/3.jpg" alt=""> </li>
</ul>
<div class="btn">
<div class="leftbtn"> < </div>
<div class="rightbtn"> > </div>
</div>
<div class="circle">
<ul class="circleUl">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="js/jquery-1.12.3.min.js"> </script>
<script>
// 设置第一个小圆点为红色
$(".circleUl li").eq(0).css("background","red");
var index = 0;
$(".leftbtn").click(function(){
// 旧的图淡出
$(".move li").eq(index).fadeOut(400);
index--;
if(index<0){
index = 3;
}
// 新图淡入
$(".move li").eq(index).fadeIn(400);
// 对应下标为index的小圆点变色
$(".circleUl li").eq(index).css("background","red").siblings().css("background","white");
});
$(".rightbtn").click(function(){
$(".move li").eq(index).fadeOut(400);
index++;
console.log(index);
if(index ==4 ){
index = 0;
}
$(".move li").eq(index).fadeIn(400);
$(".circleUl li").eq(index).css("background","red").siblings().css("background","white");
});
// 小圆点点击事件
$(".circleUl li").click(function(){
// 如果本来就显示的图一，再次点击第一个小圆点的话，什么也不做
if(index == $(this).index()) return;
// 旧的图片淡出
$(".move li").eq(index).fadeOut(400);
// 点击到哪个小圆点，把小圆点的index赋值给全局变量index （更新全局变量index）
index = $(this).index();
// 新图片淡入
$(".move li").eq(index).fadeIn(400);
// 小圆点变色
$(this).css("background","red").siblings().css("background","white");
})
</script>
</body>
</html>
运行结果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。