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 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 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
Zerg基本策略
2020/03/14 星际争霸
php 带逗号千位符数字的处理方法
2012/01/10 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
Python数据结构之图的应用示例
2018/05/11 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
Python 处理图片像素点的实例
2019/01/08 Python
Python 防止死锁的方法
2020/07/29 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
六十岁生日答谢词
2014/01/10 职场文书
人事文员岗位职责
2014/02/16 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
限期整改通知书
2015/04/22 职场文书
浅析JavaScript中的变量提升
2022/06/01 Javascript