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