jquery实现呼吸轮播效果
更新时间：2021年10月19日 17:15:17 作者：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>
运行结果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了jquery实现简易验证插件的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
JQueryEasyUI框架下的combobox的取值和绑定的方法
这篇文章主要介绍了JQueryEasyUI框架下的combobox的取值和绑定的方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-01-01
在使用jquery操作js时，经常弄不明白this与$(this)。最近不是很忙，抽空仔细研究了一下，记录下来以供在忘记的时候拉出来参考参考！2014-11-11
结构/表现/行为完全分离的选项卡(jquery版和原生JS版)
日常项目中常用到的,用jQuery和原生JS分别写了一个. 两种写法均实现了结构/表现/行为的完全分离.当然,稍作修改,可以在同一个页面中应用于多个选项卡.2010-08-08
最近看了下jQuery的源代码,其中关于CSS及className的操作思想确实很不错,值得借鉴,下面这篇文章主要给大家介绍了关于jQuery操作css方法的超全用法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了jQuery阻止事件冒泡的方法,结合实例形式分析了jQuery阻止事件冒泡的原理、常用实现方法,并结合完整实例形式分析了jQuery阻止事件冒泡的相关操作技巧,需要的朋友可以参考下2018-07-07
jquery计算出left和top,让一个div水平垂直居中的简单实例
下面小编就为大家带来一篇jquery计算出left和top,让一个div水平垂直居中的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要介绍了jquery读写cookie操作,结合实例形式分析了jQuery针对cookie的常用读写操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
下面小编就为大家带来一篇利用JQuery直接调用asp.net后台的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
放大缩小动画效果实现的方法有很多，下面有个不错的示例，使用CSS+jQuery实现的，感兴趣的朋友可以了解下2014-02-02
最新评论