jquery版轮播图效果和extend扩展

2019-11-19 16:02:51

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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 Validate格式验证功能实例代码（包括重名验证）

下一篇：Vue学习笔记进阶篇之vue-cli安装及介绍