js学习总结_轮播图之渐隐渐现版(实例讲解)


Posted in Javascript onJuly 17, 2017

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
      font-size:14px;
      -webkit-user-select:none;
    }
    ul,li{
      list-style
    }
    img{
      display: block;
      border:none;
    }
    .banner{
      position:relative;
      width:1000px;
      height:300px;
      margin:0 auto;
      overflow:hidden;
    }
    .banner .bannerInner{
      width:100%;
      height:100%;
      background:url("../img/default.gif") no-repeat center center #e1e1e1;
    }
    .banner .bannerInner div{
      position:absolute;
      width:100%;
      height:100%;
      top:0;
      left:0;
      z-index:0;
      opacity:0;
      filter:alpha(opacity=0);
    }
    .banner .bannerInner img{
      display:none;
      width:100%;
      height:100%s;
    }

    .banner .bannerTip{
      position:absolute;
      height:18px;
      overflow:hidden;
      right:20px;
      bottom:20px;
      z-index:10;
    }
    .banner .bannerTip li{
      float:left;
      margin-left:10px;
      width:18px;
      height:18px;
      background:lightblue;
      cursor:pointer;
      border-radius:50%;
    }
    .banner .bannerTip li.bg{
      background:red;
    }

    .banner a{
      display:none;
      position:absolute;
      top:50%;
      z-index:20;
      margin-top:-22.5px;
      width:30px;
      height:45px;
      background:url("../img/pre.png");
      opacity:0.5;
      filter:alpha(opacity=50);
    }
    .banner a:hover{
      opacity:1;
      filter:alpha(opacity=100);
    }
    .banner a.bannerLeft{
      left:20px;
      background-position:0 0;
    }
    .banner a.bannerRight{
      right:20px;
      background-position:-50px 0;
    }
  </style>
</head>
<body>
  <div class='banner' id='banner'>
    <div class='bannerInner'>
      <div><img src="" alt="" trueImg="img/banner1.jpg"></div>
      <div><img src="" alt="" trueImg="img/banner2.jpg"></div>
      <div><img src="" alt="" trueImg="img/banner3.jpg"></div>
      <div><img src="" alt="" trueImg="img/banner4.jpg"></div>
    </div>
    <ul class='bannerTip'>
      <li class='bg'></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" class='bannerLeft'></a>
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" class='bannerRight'></a>
  </div>

  <script>
    var banner = document.getElementById('banner');
    var bannerInner = utils.firstChild(banner),bannerTip = utils.children(banner,"ul")[0],bannerLink = utils.children(banner,'a'),bannerLeft = bannerLink[0],bannerRight = bannerLink[1];
    var divList = bannerInner.getElementsByTagName('div');
    var imgList = bannerInner.getElementsByTagName('img');
    var oLis = bannerTip.getElementsByTagName('li');
    //1、Ajax读取数据
    var jsonData = null;
    ~function(){
      var xhr = new XMLHttpRequest;
      xhr.open("get","json/banner.txt?_="+Math.random(),false);
      xhr.onreadystatechange = function(){
        if(xhr.readyState ===4 && /^2\d{2}$/.test(xhr.status)){
          jsonData = utils.formatJSON(xhr.responseText)
        }
      }
      xhr.send(null)
    }()
    //2、数据绑定
    ~function(){
      var str = "",str2 = "";
      if(jsonData){
        for(var i = 0,len=jsonData.length;i<len;i++){
          var curData = jsonData[i];
          str+='<div><img src="" alt="" trueImg="'+curData['img']+'"></div>';
          i===0?str2+="<li class='bg'></li>":str2+="<li></li>"
        }
      }
      bannerInner.innerHTMl = str;
      bannerTip.innerHTML = str2;
    }()

    //3、图片的延迟加载
    window.setTimeout(lazyImg,500)
    function lazyImg(){
      for(var i = 0,len = imgList.length;i<len;i++){
        ~function(i){
          var curImg = imgList[i];
          var oImg = new Image;
          oImg.src = curImg.getAttribute('trueImg');
          oImg.onload = function(){
            curImg.src = this.src;
            curImg.style.display = block;
            //只对第一张处理
            if(i===0){
              var curDiv = curImg.parentNode;
              curDiv.style.zIndex = 1;
              myAnimate(curDiv,{opacity:1},200);
            }
            oImg = null;
          }
        }(i)
      }
    }
    //4、自动轮播
    var interval = 3000,autoTimer = null,step = 0;
    autoTimer = window.setInterval(autoMove,interval);
    function autoMove(){
      //当已经把最后一张展示完成后(step等于最后一张的索引),我们应该展示第一张,我们让step = -1,这样再经过一次累加,step就变为0,来展示第一张
      if(step === jsonData.length-1){
        step = -1
      }
      step++;
      setBanner();
    }
    //实现轮播图切换效果的代码
    function setBanner(){
      //1、让step索引对应的那个DIV的zIndex的值为1,其他的zIndex为0 
      for(var i = 0,len = divList.length;i<len;i++){
        var curDiv = divList[i];
        if(i===step){
          utils.css(curDiv,"zIndex",1)
          //2、让当前的透明度从0变为1,当动画结束,我们需要让其他的div的透明度的值直接变为0
          myAnimate(curDiv,{opacity:1},200,function(){
            var curDivSib = utils.siblings(this);
            for(var k = 0,len = curDivSib.length;k<len;k++){
              utils.css(curDivSib[k],'opacity',0)
            }

          })
          continue
        }
        utils.css(curDiv,"zIndex",0)
      }
      //实现焦点对其
      for(i = 0,len = oLis.length;i<len;i++){
        var curLi = oLis[i];
        i === step?utils.addClass(curLi,"bg"):utils.removeClass(curLi,"bg");
      }

    }
    //5、实现鼠标悬停停止自动轮播和离开在开启自动轮播
    banner.onmouseover = function(){
      window.clearInterval(autoTimer);
      bannerLeft.style.display = bannerRight.style.display = "block"

    }
    banner.onmouseout = function(){
      autoTimer = window.setInterval(autoMove,interval);
      bannerLeft.style.display = bannerRight.style.display = "none"
    }
    //6、实现点击焦点切换
    ~function(){
      for(var i = 0,len = oLis.length;i<len;i++){
        var curLi = oLis[i];
        curLi.index = i;
        curLi.onclick = function(){
          step = this.index;
          setBanner();
        }
      }
    }()
    //7、实现左右切换
    bannerRight.onclick = autoMove;
    bannerLeft.onclick = function(){
      if(step === 0){
        step = jsonData.length;
      }
      step--;
      setBanner();
    }
  </script>
</body>
</html>

以上这篇js学习总结_轮播图之渐隐渐现版(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 #Javascript
node.js express中app.param的用法详解
Jul 16 #Javascript
Node.js中流(stream)的使用方法示例
Jul 16 #Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 #Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 #Javascript
Vue应用部署到服务器的正确方式
Jul 15 #Javascript
js+html5实现侧滑页面效果
Jul 15 #Javascript
You might like
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
Python生成器generator原理及用法解析
2020/07/20 Python
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
什么是lambda函数
2013/09/17 面试题
周年庆典邀请函范文
2014/01/24 职场文书
综合素质评价自我评价
2015/03/06 职场文书
2015年手术室工作总结
2015/05/11 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
python flask框架快速入门
2021/05/14 Python
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
JavaScript流程控制(循环)
2021/12/06 Javascript