Как определить, почему гиперссылка не работает? - PullRequest
0 голосов
/ 16 октября 2018

Я создал новый формат основного баннера для моей страницы.Тем не менее, все ссылки, за исключением небольшого предварительного изображения на правой стороне, не работают, и я понятия не имею, почему.

Я дизайнер, который пытается делать публикации одновременно, поэтому мои знания дляjs очень ограничен, но я хорошо разбираюсь с css и html.

Вот ссылка

;
(function($) {

    $.fn.DB_tabArrowSlideMove2 = function(options) {
      var opt = {
        motionType: 'fade',
        motionSpeed: 300,
        autoRollingTime: 3000,
        videoRollingTime: 6000,
        arrowVisible: true,
        overRolling: false,
        random: false,
        yt_player: []
      };

      $.extend(opt, options);
      return this.each(function() {
          var $this = $(this);
          var $img = $this.find('.img');
          var $img_li = $img.find('> li');
          var $arrow = $this.find('.arrow');
          var $next = $this.find('.next');
          var $prev = $this.find('.prev');
          var $auto = $this.find('.auto');
          var len = $img_li.length;
          //console.log(len);
          var $btn = $this.find('.btn');
          if (len == 1) {
            $next.hide();
            $prev.hide();
            $btn.hide();
            return;
          }
          if ($btn.find('li').length == 0) {
            for (var i = 0; i < len; i++) {
              $btn.append('<li class=n' + (i + 1) + '><span>' + (i + 1) + '</span></li>');
            };
          };
          var $btn_li = $btn.find('> li');
          var current = 0;
          var oldCurrent = 0;
          var dir = 'next';
          var random = opt.random;
          if (random) {
            current = Math.floor(Math.random() * len);
            oldCurrent = current;
            dir = 'random';
          };

          var timerId = 0;
          var timer = 0;
          var autoPlay = true;
          var arrowOver = false;
          var imgWidth = $img_li.width();
          var imgHeight = $img_li.height();
          var overRolling = opt.overRolling;
          var arrowVisible = opt.arrowVisible;
          var motionType = opt.motionType;
          var motionSpeed = opt.motionSpeed;
          var autoRollingTime = opt.autoRollingTime;
          var videoRollingTime = opt.videoRollingTime;
          var mOver = false;

          //
          var $window = $(window);
          //var yt_player=opt.yt_player;
          var yt_length = yt_player.length;
          var yt_pos = {};
          var scrollTop = 0;
          if (yt_length) {
            //var $iframe=$this.find('iframe');		
            $iframe.each(function(index) {
              $(this).attr('data-no', index);
            });
            $window.scroll(function() {
              videoSoundByWinScroll();
            });
            var isMute = 1;
            videoSoundByWinScroll();

            function videoSoundByWinScroll() {
              yt_pos.start = $this.offset().top;
              yt_pos.height = $this.height()
              yt_pos.end = yt_pos.start + yt_pos.height
              scrollTop = $(this).scrollTop();
              if (scrollTop + $window.height() > yt_pos.start && scrollTop < yt_pos.end) {
                if (isMute == 0) {
                  var _iframe = $img_li.eq(current).find('iframe');
                  if (_iframe.length) {
                    var _no = _iframe.attr('data-no') * 1;
                    yt_player[_no].playVideo();
                  }
                  isMute = 1;
                  $this.mouseleave();
                }
              } else {
                if (isMute == 1) {
                  for (var i = 0; i < yt_length; i++) {
                    //console.log('멈춤');	
                    yt_player[i].pauseVideo();
                  }
                  isMute = 0;
                  $this.mouseenter();
                }
              }
            }

          }

          init();

          function init() {
            setCss();
            setMouseEvent();
            setEnterFrame();
          };

          function setCss() {
            if (arrowVisible == false) {
              $arrow.hide();
              $auto.hide();
            };
            for (var i = 0; i < len; i++) {
              var _img = $img_li.eq(i);
              switch (motionType) {
                case 'x':
                  if (i == current) {
                    _img.css({
                      'left': 0,
                      'top': 0
                    });
                  } else {
                    _img.css({
                      'left': imgWidth * i,
                      'top': 0
                    });
                  }
                  break;
                case 'y':
                  if (i == current) {
                    _img.css({
                      'top': 0,
                      'left': 0
                    });
                  } else {
                    _img.css({
                      'top': imgHeight * i,
                      'left': 0
                    });
                  }
                  break;
                default:
                  _img.css({
                    'top': 0,
                    'left': 0
                  });
                  if (i == current) {
                    _img.show();
                  } else {
                    _img.hide();
                  };
              };
            };
            $btn_li.removeClass('on');
            $btn_li.eq(current).addClass('on');
            $btn_li.find('span').stop().css('width', 0);



            function setMouseEvent() {
              $this.bind('mouseenter', function() {
                mOver = true;
                if (overRolling == false && autoPlay == true) {
                  $btn_li.eq(current).find('span').stop();
                };
                if (arrowVisible == false) {
                  $arrow.show();
                  $auto.show();
                };
              });
              $this.bind('mouseleave', function() {
                mOver = false;
                if (overRolling == false && autoPlay == true) {
                  var time
                  if ($img_li.eq(current).find('iframe').length) {
                    time = videoRollingTime - videoRollingTime * $btn_li.eq(current).find('span').width() / $btn_li.eq(current).find('span').parent().width();
                  } else {
                    time = autoRollingTime - autoRollingTime * $btn_li.eq(current).find('span').width() / $btn_li.eq(current).find('span').parent().width();
                  }
                  //console.log('남은시간:'+time);
                  $btn_li.eq(current).find('span').animate({
                    'width': '100%'
                  }, time, 'linear');
                };
                if (arrowVisible == false) {
                  $arrow.hide();
                  $auto.hide();
                };
                if (random && (motionType != 'x' || motionType != 'y')) {
                  dir = 'random';
                }

              });
              $btn_li.bind('mouseenter', function() {
                var _index = $(this).index();
                if (_index > current) {
                  //dir='next';
                } else {
                  //dir='prev';
                };
                if (current != _index) {
                  current = _index;
                  setAnimation();
                };
              });

              $arrow.bind('mouseenter', function() {
                arrowOver = true;
              });
              $arrow.bind('mouseleave', function() {
                arrowOver = false;
              });
              $next.bind('click', function() {
                dir = 'next';
                changeCurrent();
              });
              $prev.bind('click', function() {
                dir = 'prev';
                changeCurrent();
              });

              $auto.bind('click', function() {
                if (autoPlay) {
                  autoPlay = false;
                  setReplace($auto.find('img'), 'src', '_on', '_off');
                } else {
                  autoPlay = true;
                  setReplace($auto.find('img'), 'src', '_off', '_on');
                };
              });

            };

            function changeCurrent() {
              if (autoPlay || arrowOver) {
                if (dir == 'next') {
                  current++;
                  if (current == len) {
                    current = 0
                  }
                } else if (dir == 'prev') {
                  current--;
                  if (current < 0) {
                    current = len - 1;
                  }
                  dir = "next";
                } else {
                  for (var i = 0; i < 10; i++) {
                    current = Math.floor(Math.random() * len);
                    if (oldCurrent != current) {
                      break;
                    }
                  }
                }
                //console.log(current);
                setAnimation();
              };
            };

            function setEnterFrame() {
              var rollingTime = 0;
              if (autoRollingTime > 0) {
                setInterval(function() {
                  // console.log(mOver,current,dir)
                  if (mOver == false || overRolling == true) {
                    timer++;
                    //console.log('현재동작중인:'+current)
                    //video
                    if ($img_li.eq(current).find('iframe').length) {
                      rollingTime = videoRollingTime;
                    } else {
                      rollingTime = autoRollingTime;
                    }
                    if (timer % (Math.ceil(rollingTime / 100)) == 0) {
                      changeCurrent();
                    }

                  }
                }, 100);
              };
            };


            $btn_li.removeClass('on');
            $btn_li.eq(current).addClass('on');
            $btn_li.find('span').stop().css('width', 0);
            if (mOver == false || overRolling == true) {


              function setReplace(_mc, _attr, _old, _new) {
                var str = _mc.attr(_attr);
                if (String(str).search(_old) != -1) {
                  _mc.attr(_attr, str.replace(_old, _new));
                };
              };
            });
        };
      })(jQuery);



    if ($iframe.length == 0) {

      $('.JS_mainBnr').DB_tabArrowSlideMove2({
        motionType: 'fade',
        motionSpeed: 600,
        autoRollingTime: 6000,
        arrowVisible: true,
        overRolling: false,
        random: false
      })
    }
.JS_mainBnr {
  margin-top: -283px;
  z-index: 1;
  width: 100%;
  height: 369px/;
  overflow: hidden;
  margin: 0 auto;
  text-align: center
}

.JS_mainBnr .img {
  position: relative;
  margin: 0 auto;
  width: auto;
  height: 100%;
}

.JS_mainBnr .img:after {
  content: "";
  display: block;
  clear: both;
}

.JS_mainBnr .img li {
  position: absolute;
  top: 0;
  left: 50%!important;
  width: 5000px;
  height: auto;
  margin-left: -2500px;
  text-align: center;
}

.JS_mainBnr .img li a {
  width: 5000px;
  height: auto;
  display: inline-block
}

.JS_mainBnr .img li:first-child {
  z-index: 1;
}


/* Button */

.JS_mainBnr .btn {
  z-index: 3;
  position: absolute;
  top: 0px;
  letter-spacing: -4px;
  top: 0;
  left: 50%!important;
  width: 5000px;
  height: 100%;
  margin-left: -2630px;
  text-align: center;
}

.JS_mainBnr .btn:after {
  content: "";
  display: block;
  clear: both;
}

.JS_mainBnr .btn li {
  position: relative;
  *zoom: 1;
  padding: 0 0;
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
  color: #333;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0;
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
  width: 257px;
  margin-left: 60%;
}

.JS_mainBnr:hover .btn li {
  background: rgba(0, 0, 0, .1);
}

.JS_mainBnr:hover .btn li img {
  opacity: 0.3
}

.JS_mainBnr .btn li.on {
  z-index: 1;
  background: rgba(255, 255, 255, .9) color:#fff;
}

.JS_mainBnr:hover .btn li.on img {
  opacity: 1
}


/* Arrow */

.JS_mainBnr .prev {
  position: absolute;
  top: 285px;
  left: 515px;
  width: 21.5px;
  height: 30px;
  background: url('/_wg/img/_arrow/arrowL_50.gif') no-repeat 50% 50% rgba(255, 255, 255, .2);
  opacity: 0;
  -webkit-opacity: 0;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  background-size: 18px 27px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="JS_mainBnr">

  <ul class="img">

    <li>
      <a href="/_wg/import/afsmall.html"><img src="/_wg/img/JS_mainBnr/06P.jpg" alt=""></a>
    </li>
    <li>
      <a href="/_wg/import/benefit.html"><img src="/_wg/img/JS_mainBnr/08O.jpg" alt=""></a>
    </li>
    <li>
      <a href="/_wg/import/newcontent2.html"><img src="/_wg/img/JS_mainBnr/09J.jpg" alt=""></a>
    </li>

  </ul>

  <div id="outer">
    <ul class="btn">
      <li>
        <a href="/_wg/import/afsmall.html"><img src="/_wg/img/JS_mainBnr/01thumba.jpg" width="257px" height="105px"></a>
      </li>
      <li>
        <a href="/_wg/import/benefit.html"><img src="/_wg/img/JS_mainBnr/02thumba.jpg" width="257px" height="105px"></a>
      </li>
      <li>
        <a href="/_wg/import/newcontent2.html"><img src="/_wg/img/JS_mainBnr/03thumba.jpg" width="257px" height="105px"></a>
      </li>


    </ul>
  </div>

  <ul class="DB_dir">
    <span class="arrow prev"></span>
    <span class="arrow next"></span>
  </ul>
</div>

1 Ответ

0 голосов
/ 16 октября 2018
.JS_mainBnr .btn {
z-index: 3;
position: absolute;
top: 0;
left: 50%;
margin-left: 370px;

}

.JS_mainBnr .btn li {поле слева: 60%} / << УДАЛИТЬ </em> /

...