Heim > Artikel > Web-Frontend > Teilen des Karusselleffekts der JQuery-Version und Beispiele für Erweiterungserweiterungen

Teilen des Karusselleffekts der JQuery-Version und Beispiele für Erweiterungserweiterungen

小云云Original: 2017-12-31 16:52:501502Durchsuche

In diesem Artikel werden hauptsächlich die Auswirkungen der JQuery-Version des Karussellbilds sowie die relevanten Informationen zur Erweiterung vorgestellt. Ich hoffe, dass es für interessierte Freunde hilfreich ist alle.

Der spezifische Code lautet wie folgt

<!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 p{
      position:absolute;
      top:0;
      left:0;
      z-index:0;
      width:100%;
      height:100%;
      opacity: 0;
      filter:alpha(opacity=0);
    }
    .bannerInner p 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(&#39;../img/pre.png&#39;);

    }
    .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>
  <p class=&#39;banner&#39; id=&#39;bannerFir&#39;>
    <p class=&#39;bannerInner&#39;>
      <p><img src="" alt="" trueImg=&#39;img/banner1.jpg&#39;></p>
      <p><img src="" alt="" trueImg=&#39;img/banner2.jpg&#39;></p>
      <p><img src="" alt="" trueImg=&#39;img/banner3.jpg&#39;></p>
      <p><img src="" alt="" trueImg=&#39;img/banner4.jpg&#39;></p>
    </p>
    <ul class=&#39;bannerTip&#39;>
      <li class=&#39;bg&#39;></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" class=&#39;bannerLeft&#39;></a>
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" class=&#39;bannerRight&#39;></a>
  </p>

  <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"),$pList = 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:&#39;get&#39;,
        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+=&#39;<p><img src="" alt="" trueImg="&#39;+item["img"]+&#39;"></p>&#39;;
            index===0?str2+=&#39;<li class="bg"></li>&#39;:str2+=&#39;<li></li>&#39;
          })

          $bannerInner.html(str);
          $bannerTip.html(str2);
          $pList = $bannerInner.children("p")
          $imgList = $bannerInner.find(&#39;img&#39;)
          $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(&#39;src&#39;,this.src).css("display","block")//内置属性使用prop
          }
        })
        $pList.eq(0).css("zIndex",1).animate({opacity:1},300);
      }
      //封装一个轮播图切换的效果
      function changeBanner(){
        var $curp = $pList.eq(step);
        $curp.css("zIndex",1).siblings().css("zIndex",0);
        $curp.animate({opacity:1},300,function(){
          $(this).siblings().css("opacity",0)
        })
        $oLis.eq(step).addClass("bg").siblings().removeClass(&#39;bg&#39;)
      }
      //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(&#39;mouseover&#39;,function(){
        window.clearInterval(autoTimer);
        $bannerLeft.css("display","block")
        $bannerRight.css("display","block")
      }).on(&#39;mouseout&#39;,function(){
        autoTimer = window.setInterval(autoMove,interval);
        $bannerLeft.css("display","none")
        $bannerRight.css("display","none")

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

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

    }


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

Verwandte Empfehlungen:

Über JQuery und HTML+ CSS-Implementierungsgürtel Teilen von Karussellbildern mit kleinen Punkten und linken und rechten Schaltflächen

Beispiel für eine detaillierte Erklärung von Jquery, um den linken und rechten Karussellbildeffekt zu erzielen

JS-Loop-Karussellbild

Das obige ist der detaillierte Inhalt vonTeilen des Karusselleffekts der JQuery-Version und Beispiele für Erweiterungserweiterungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiel für die Codefreigabe der jQuery Validate-FormatüberprüfungsfunktionNächster Artikel：Beispiel für die Codefreigabe der jQuery Validate-Formatüberprüfungsfunktion

In Verbindung stehende Artikel

Mehr sehen