如何确定超链接不起作用的原因?



我已经为我的页面创建了主横幅的新格式。但是,除了右侧的小预览图片外,所有链接都不起作用,我不知道为什么。

我是一名设计师,同时尝试进行发布,所以我对 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>

.JS_mainBnr .btn {
z-index: 3;
position: absolute;
top: 0;
left: 50%;
margin-left: 370px;

}

.JS_mainBnr .btn li { 左边距: 60% }/<<删除/

相关内容

最新更新