jquery版轮播图效果和extend扩展


Posted in jQuery onJuly 18, 2017

本文实例为大家分享了jquery版本轮播图及extend扩展的具体代码,供大家参考,具体内容如下

具体代码如下

<!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:none;
    }
    img{
      display:block;
      border:none;
    }
    a{
      text-decoration: none;
    }
    .banner{
      position:relative;
      margin:10px auto;
      width:1000px;
      height:300px;
      overflow:hidden;
    }
    .bannerInner{
      width:100%;
      height:100%;
      background:url("../img/default.gif") no-repeat center center;
    }
    .bannerInner div{
      position:absolute;
      top:0;
      left:0;
      z-index:0;
      width:100%;
      height:100%;
      opacity: 0;
      filter:alpha(opacity=0);
    }
    .bannerInner div img{
      display:none;
      width:100%;
      height:100%;
    }
    .banner .bannerTip{
      position:absolute;
      right:20px;
      bottom:20px;
      z-index:10;
      overflow:hidden;
    }
    .banner .bannerTip li{
      float:left;
      margin-left:10px;
      width:18px;
      height:18px;
      background:lightblue;
      border-radius:50%;
      cursor:pointer;
    }
    .banner .bannerTip li.bg{
      background:orange;
    }
    .banner a{
      display:none;
      position:absolute;
      top:50%;
      margin-top:-22.5px;
      z-index:10;
      width:30px;
      height:45px;
      opacity: 0.5;
      filter:alpha(opacity=50);
      background-image:url('../img/pre.png');

    }
    .banner a.bannerLeft{
      left:20px;
      background-position:0 0;
    }
    .banner a.bannerRight{
      right:20px;
      background-position:-50px 0;
    }
    .banner a:hover{
      opacity: 1;
      filter:alpha(opacity=100);
    }
  </style>
</head>
<body>
  <div class='banner' id='bannerFir'>
    <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>
    jQuery.fn.extend({
      banner:myBanner
    })
    //通过jQuery选择器或者筛选的方法获取到的jQuery集合是不存在dom映射机制的,之前获取到的dom集合,之后再页面中HTML结构改变了,集合中的内容不会跟着自动发生变化(JS获取的元素集合有DOM映射的机制)
    function myBanner(selector,ajaxURL,interval){
      var $banner = $("#"+selector);
      var $bannerInner = $banner.children(".bannerInner"),$divList = null,$imgList = null;
      var $bannerTip = $banner.children(".bannerTip"),$oLis = null
      var $bannerLeft = $banner.children(".bannerLeft"),$bannerRight = $banner.children(".bannerRight")

      //1、Ajax读取数据
      var jsonData = null;
      $.ajax({
        url:ajaxURL+"?_="+Math.random(),
        type:'get',
        dataType::"json",
        async:false,//当前的请求是同步的
        success:function(data){
          jsonData = data;

        }
      })
      //2、实现数据的绑定
      function bindData(){
        var str = "",str2 = "";
        if(jsonData){
          //原生的jsonData使用$.each()
          $.each(jsonData,function(index,item){
            str+='<div><img src="" alt="" trueImg="'+item["img"]+'"></div>';
            index===0?str2+='<li class="bg"></li>':str2+='<li></li>'
          })

          $bannerInner.html(str);
          $bannerTip.html(str2);
          $divList = $bannerInner.children("div")
          $imgList = $bannerInner.find('img')
          $oLis = $bannerTip.children("li")
        }
      }
      //3、实现图片的延迟加载
      window.setTimeout(lazyImg,500);
      function lazyImg(){
        //jquery元素集合 直接写$imgList.each()
        $imgList.each(function(index,item){
          var _this = this;
          var oImg = new Image;
          oImg.src = $(this).attr("trueImg");//$(this)等价于$(item)
          oImg.onload = function(){
            $(_this).prop('src',this.src).css("display","block")//内置属性使用prop
          }
        })
        $divList.eq(0).css("zIndex",1).animate({opacity:1},300);
      }
      //封装一个轮播图切换的效果
      function changeBanner(){
        var $curDiv = $divList.eq(step);
        $curDiv.css("zIndex",1).siblings().css("zIndex",0);
        $curDiv.animate({opacity:1},300,function(){
          $(this).siblings().css("opacity",0)
        })
        $oLis.eq(step).addClass("bg").siblings().removeClass('bg')
      }
      //4、实现自动轮播
      interval = interval || 3000;
      var step = 0,autoTimer = null;
      autoTimer = window.setInterval(autoMove,interval)
      function autoMove(){
        if(step === jsonData.length-1){
          step = -1;
        }
        step++;
        changeBanner();
      }
      //5、控制左右按钮的显示隐藏和自动轮播的开始和暂停
      $banner.on('mouseover',function(){
        window.clearInterval(autoTimer);
        $bannerLeft.css("display","block")
        $bannerRight.css("display","block")
      }).on('mouseout',function(){
        autoTimer = window.setInterval(autoMove,interval);
        $bannerLeft.css("display","none")
        $bannerRight.css("display","none")

      })
      //6、实现焦点切换
      $oLis.on('click',function(){
        step = $(this).index();
        changeBanner();
      })

      //7、实现左右切换
      $bannerRight.on('click',autoMove);
      $bannerLeft.on('click',function(){
        if(step===0){
          step = jsonData.length;
        }
        step--;
        changeBanner();
      });

    }


    //外部使用
    $().banner("bannerFir","json/banner.txt",1000)
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
jQuery中event.target和this的区别详解
Aug 13 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 #jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 #jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 #jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 #jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 #jQuery
jQuery常用选择器详解
Jul 17 #jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 #jQuery
You might like
php切割页面div内容的实现代码分享
2012/07/31 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
网页自动跳转代码收集
2009/09/27 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
JQuery球队选择实例
2015/05/18 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
python获取mp3文件信息的方法
2015/06/15 Python
Python判断Abundant Number的方法
2015/06/15 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python 读取文件并替换字段的实例
2018/07/12 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
大三预备党员入党思想汇报
2014/01/08 职场文书
党员学习十八大感想
2014/01/17 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
实习单位指导教师评语
2014/12/30 职场文书
异地恋情人节寄语
2015/02/28 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python