首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

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版轮播图效果和extend扩展

- Author -

diasa

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
简单实现jQuery弹幕效果
May 06 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jquery实现上传文件进度条
Mar 26 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
Kotlin(1) 自定义函数(1) Spring Security(2) Navicat(1) 动态权限(1) maven(2) 内置函数(1) V Rising(1) 记事本(1) Android Gradle(1)
You might like
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
js 页面输出值
2008/11/30 Javascript
简单通用的JS滑动门代码
2008/12/19 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
js常用DOM方法详解
2017/02/04 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
Python解释执行原理分析
2014/08/22 Python
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
Python 文件管理实例详解
2015/11/10 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
Python高斯消除矩阵
2019/01/02 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
基于python监控程序是否关闭
2020/01/14 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
销售副总经理岗位职责
2013/12/11 职场文书
实习鉴定范文
2013/12/19 职场文书
校企合作协议书
2014/04/16 职场文书
走进科学观后感
2015/06/18 职场文书
导游词幽默开场白
2019/06/26 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
浅谈Node的内存泄露问题
2022/05/06 NodeJs
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS