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事件串连执行多个处理过程的方法
Mar 09 Javascript
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
Javascript中正则表达式的全局匹配模式分析
Apr 26 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
jquery插件格式实例分析
Jun 16 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
angular 服务随记小结
May 06 Javascript
vue路由跳转传参数的方法
May 06 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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编程注意事项的小结
2013/04/27 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
python中pop()函数的语法与实例
2020/12/01 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
我的五年职业生涯规划
2014/01/23 职场文书
京剧自荐信
2014/01/26 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
岳麓书院导游词
2015/02/03 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
一起来学习Python的元组和列表
2022/03/13 Python
Rust中的Struct使用示例详解
2022/08/14 Javascript