js实现淡入淡出轮播切换功能


Posted in Javascript onJanuary 13, 2017

话不多说,请看代码:

<!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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript的函数
Jan 31 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 Javascript
JavaScript中arguments的使用方法详解
Dec 20 Javascript
js仿百度音乐全选操作
Jan 13 #Javascript
js实现tab选项卡切换功能
Jan 13 #Javascript
js制作可以延时消失的菜单
Jan 13 #Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 #Javascript
js实现自动轮换选项卡
Jan 13 #Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 #Javascript
详解angularJs中自定义directive的数据交互
Jan 13 #Javascript
You might like
PHP中PDO基础教程 入门级
2011/09/04 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python实现的RSS阅读器实例
2015/07/25 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
党员检讨书
2014/10/13 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
公司经营目标责任书
2015/01/29 职场文书
银行招聘自荐信
2015/03/06 职场文书
试用期自我评价范文
2015/03/10 职场文书
观后感格式
2015/06/19 职场文书
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis