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实现全选、全不选以及单选功能
Mar 23 jQuery
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
jquery实现抽奖功能
Oct 22 jQuery
jquery实现拖拽小方块效果
Dec 10 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
关于php mvc开发模式的感想
2011/06/28 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
Python中实现switch功能实例解析
2018/01/11 Python
解决Python3下map函数的显示问题
2019/12/04 Python
Python post请求实现代码实例
2020/02/28 Python
解决c++调用python中文乱码问题
2020/07/29 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
保送生自荐信范文
2013/10/06 职场文书
个人收入证明范本
2014/01/12 职场文书
三年级音乐教学反思
2014/01/28 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
家长对老师的评语
2014/04/18 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
校长一岗双责责任书
2015/05/09 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
使用Python拟合函数曲线
2022/04/14 Python
java实现面板之间切换功能
2022/06/10 Java/Android