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 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
jQuery 事件队列调整方法
Sep 18 Javascript
jquery 双色表格实现代码
Dec 08 Javascript
TBCompressor js代码压缩
Jan 05 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
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
PHP防注入安全代码
2008/04/09 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
PHP模块化安装教程
2016/06/01 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
python任务调度实例分析
2015/05/19 Python
python更新列表的方法
2015/07/28 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
python 中xpath爬虫实例详解
2019/08/26 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
对照四风自我剖析材料
2014/10/07 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
升职自荐信范文
2015/03/27 职场文书
python基础之while循环语句的使用
2021/04/20 Python
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang