search

Home  >  Article  >  Web Front-end  >  Sharing of jquery version carousel effect and extend extension examples

Sharing of jquery version carousel effect and extend extension examples

小云云
小云云Original
2017-12-31 16:52:501528browse

This article mainly introduces the effect of the jquery version of the carousel image in detail, as well as the related information of extend. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The specific code is as follows


<!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>

Related recommendations:

About JQuery and html+css to achieve small circles Click and share the carousel image of the left and right buttons

Detailed example of jquery to achieve the effect of the left and right carousel image

JS loop carousel image

The above is the detailed content of Sharing of jquery version carousel effect and extend extension examples. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery Validate format verification function example code sharingNext article：jQuery Validate format verification function example code sharing

Related articles

See more