js实现淡入淡出轮播切换功能
更新时间：2017年01月13日 08:46:19 作者：带阿狸去旅行
本文主要分享了javascript实现淡入淡出轮播切换功能的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
话不多说，请看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
/*最小宽度 这样图片就可以自适应居中*/
.warp{
min-width:900px;
width:100%;
height: 600px;
margin:0 auto;
}
#banner{
position: relative;
}
ul{
position: relative;
width:100%;
height:600px;
overflow: hidden;
}
ul li{
display: none;
position: absolute;
top:0;
left: 0;
width: 100%;
height: 600px;
text-align: center;
}
.cur{
position:absolute;
bottom:20px;
text-align: center;
width: 100%;
height: 40px;
line-height: 40px;
}
.cur span{
display: inline-block;
width: 20px;
height: 20px;
background:#000;
}
.cur span.active{
background:blue;
}
.btn{
position: absolute;
top:50%;
width: 50px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top:-50px;
color:#fff;
font-size:18px;
background: rgba(0,0,0,0.9)
}
.btnLeft{
left:0;
}
.btnRight{
right:0;
}
img{
width: 900px;
height: 600px;
}
</style>
</head>
<body>
<div class="warp">
<div class="lunbo" id="banner">
<ul>
<li style="background:red;display: block">全屏渐变 图片自适应居中</li>
<li style="background:green">全屏渐变 图片自适应居中</li>
<li style="background:yellow">全屏渐变 图片自适应居中</li>
</ul>
<!-- 如果两个按钮在图片的外面 只需要把按钮移到外面然后在js里添加按钮移入清除定时器事件 -->
<div class="btn btnLeft"><</div>
<div class="btn btnRight">></div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script>
var num=0;
var btnLeft=$(".btnLeft");
var btnRight=$(".btnRight");
var Id=$("#banner");
var oUl=Id.find("ul");
var oLi=oUl.find("li");
var oLiLen=oLi.length;
var curHtml="<div class='cur'></div>";
Id.append(curHtml);
var oCur=$(".cur");
// 动态添加小圆点
for(var i=0;i<oLiLen;i++){
var curA="<span></span>"
oCur.append(curA);
}
var oCurSpan=oCur.find("span");
var oCurS=oCur.find("span:first");
oCurS.addClass('active')
// 自动轮播
var t=setInterval(function(){
num++;
lunbo();
},3000);
// 移动到轮播清除定时器
Id.hover(function(){
clearInterval(t)
},function(){
t=setInterval(function(){
num++;
lunbo();
},3000);
});
// 左箭头按钮
btnLeft.on("click",function(){
num--;
lunbo();
})
//右箭头按钮
btnRight.on("click",function(){
num++;
lunbo();
})
function lunbo(){
if(num==oLiLen){
num=0;
}
oLi.eq(num).fadeIn().siblings().fadeOut();
oCurSpan.eq(num).addClass('active').siblings().removeClass('active');
}
lunbo();
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
本文主要介绍了Webpack自动清理打包目录的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了JavaScript 实现页面滚动动画的方法，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了基于js实现数组相邻元素上移下移,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了记录一篇redux-saga的基本使用过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
本篇文章主要分享了js实现带缓动动画的导航栏效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了javascript实现切换td中的值的方法,需要的朋友可以参考下2014-12-12
前端将dom转换成图片的方法(使用dom-to-image)
这篇文章主要介绍了使用轻量级的dom-to-image插件将DOM元素转换为图片并下载,该插件支持多种图片格式,如SVG、PNG、JPEG等,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-01-01
JavaScript用htc实现WebService的调用2008-04-04
要实现短信验证码界面，首先要有一个文本框，旁边是按钮，点击时开始倒计时。接下来通过本文给大家分享js实现简单短信验证码界面，感兴趣的朋友参考下吧2017-08-08
Grunt是一个自动任务运行器，会按照预先设定的顺序自动运行一系列的任务。这可以简化工作流程，减轻重复性工作带来的负担2015-08-08
最新评论