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 作用域使用说明
Aug 13 Javascript
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
纯javascript版日历控件
Nov 24 Javascript
微信小程序实现animation动画
Jan 26 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 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
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
PHP常用数组函数介绍
2014/07/28 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
python中管道用法入门实例
2015/06/04 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
使用python存储网页上的图片实例
2018/05/22 Python
python变量的存储原理详解
2019/07/10 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
详解python tcp编程
2020/08/24 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
电气自动化自荐信
2013/10/10 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
武侯祠导游词
2015/02/04 职场文书
小学德育工作总结2015
2015/05/12 职场文书
小学英语教学随笔
2015/08/14 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js