• jQuery实现智能判断固定导航条或侧边栏的方法

     <div id="divToptop" ><h1 id="BlogTitle"><a href="{$host}">{$name}</a></h1><h3 id="BlogSubTitle">{$subname} </h3> <div id="divNavBar"><ul>

  • 图片轮播

    <div class="header-ADS">
        <div id="LPAdSlots-23296" class="LPAdSlots" data-loaded="loaded" data-completed="completed" style="width: 100%; height: 290px;"><div class="swiper-wrap-ad23296">
        <ul class="swiper-box">
          <li style="background: rgb(232, 236, 242) url(http://weixui.com/zb_users/upload/2019/06/20190607211651155991341197368.jpg) no-repeat scroll center 0px; display: block;">
    
    
    <a href="http://weixui.com/" target="_blank"></a>
    
    </li>
          <li style="background: rgb(201, 187, 161) url(http://weixui.com/zb_users/upload/2019/07/20190703224556156216515662176.jpg) no-repeat scroll center 0px; display: none;">
    
    <a href="http://weixui.com/" target="_blank"></a>
    
    </li>
          <li style="background: rgb(251, 231, 150) url(http://weixui.com/zb_users/upload/2019/06/201906151560604634195782.jpg) no-repeat scroll center 0px; display: none;">
    
    <a href=" http://weixui.com/" target="_blank"></a>
    
    </li>
    
      </ul>
        <div class="dot-wrap"><span class="active"></span><span class=""></span><span class=""></span></div>
      </div>
      <style>
        .swiper-wrap-ad23296{
          overflow: hidden;
          width: 100%;
          height: 100%;
          position: relative;
        }
        .swiper-wrap-ad23296 .swiper-box li{
          left: 0;
          top: 0;
          text-align: center;
          width: 100%;
          height: 290px;
          display: none;
          position: absolute;
        }
        .swiper-wrap-ad23296 .swiper-box li a{
          display: block;
          height: 290px;
          width: 980px;
          margin: 0 auto;
        }
        
        .swiper-wrap-ad23296 .swiper-box li:first-child{
          display: block;
        }
        .swiper-wrap-ad23296 .dot-wrap{
          width: 100%;
          bottom: 20px;
          height: 15px;
          padding: 10px 0;
          position: absolute;
          text-align: center;
        }
        .swiper-wrap-ad23296 .dot-wrap span{
          width: 18px;
          height: 18px;
          cursor: pointer;
          transition: .5s all;
          display: inline-block;
          margin-right: 10px;
          border-radius: 20px;
          background-color: rgba(255,255,255,0.5);
        }
        .swiper-wrap-ad23296 .dot-wrap span.active{
            background-color: #fff;
        }
        .swiper-wrap-ad23296 .dot-wrap span:hover{
          opacity: 1;
        }
      </style>
      <script type="text/javascript">
        (function(){
          var $wrap = $('.swiper-wrap-ad23296'),       // 轮播外层盒子
          $box = $wrap.find('.swiper-box'),                  // 轮播图片ul
          $li = $box.find('li'),                             // 轮播li
          $eachW = $li.width(),                              // 每个li的宽度
          $dotWrap = $wrap.find('.dot-wrap'),                // 圆形索引
          $liLength = $li.length;                            // li的总个数
          if($liLength > 1){
            // 初始化圆形索引
            var html = '<span class="active"></span>';
            for(var j = 0; j < $liLength-1; j++){
              html+='<span></span>'
            }
            $dotWrap.append(html);
            var $dot = $dotWrap.find('span'),
              i = 0, timer;
            // 自动轮播
            autoPlay();
            // 圆形索引事件
           $dot.on('click', function(){
               clearInterval(timer);
               i = $(this).index();
               move();
               autoPlay();
            });
            function autoPlay(){
              timer = setInterval(function(){
                i >= $liLength - 1 ? i = 0 : i++;
                move();
              }, 6000);
            };
            function move(){
              $li.fadeOut().eq(i).fadeIn();
              $dot.removeClass('active').eq(i).addClass('active');
            };
          }
        })();
      </script></div>
    </div>
  • 网站分类
    搜索
    最新留言
      文章归档