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网页加载进度条的实现
Jun 01 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 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
模仿OSO的论坛(一)
2006/10/09 PHP
php缓存技术详细总结
2013/08/07 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
Python全局变量用法实例分析
2016/07/19 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
Python异常处理操作实例详解
2018/08/28 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
python实现批量修改文件名
2020/03/23 Python
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
英语故事演讲稿
2014/04/29 职场文书
交通安全责任书范本
2014/07/24 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
感谢师恩主题班会
2015/08/17 职场文书
小学生法制教育心得体会
2016/01/14 职场文书