【发布时间】：2014-11-26 23:32:20
【问题描述】：
我正在使用带有缩略图滑块的 FlexSlider 2。然而，问题是，主图像没有响应。如果我按下下一个/上一个按钮，它不会滑动/淡入下一个/上一个图像。即使我单击其中一个缩略图，它也不会改变。但是缩略图滑块的上一个/下一个按钮可以正常工作。我就是找不到问题。我没有触摸 flexslider.js，而是 flexslider.css。我改变了一些东西来摆脱边界阴影等等。但我也使用了原封不动的 flexslider.css 并且它也没有工作。代码如下：
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/flexslider.css" type="text/css">
<link rel="stylesheet" href="css/default.css" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
directionNav: false,
slideshow: false,
touch: true,
itemWidth: 160,
itemMargin: 3,
asNavFor: '#slider'
});
$('#slider').flexslider({
start: function(slider) {
$('html').removeClass('no-js');
slider.removeClass('loading');
},
animation: "fade",
slideshow: false,
directionNav: false,
controlNav: true,
touch: true,
useCSS: false,
slideshowSpeed: 3000,
animationSpeed: 300,
sync: "#carousel"
});
});
</script>
<script>
function launchFullScreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
$('.slide_text').css('bottom', '5%');
$('.slide_text').css('zoom', '1.5');
$('.flex-fullscreen-launch').css('visibility', 'hidden');
$('.flex-fullscreen-cancel').css('visibility', 'visible');
$('.flex-fullscreen-cancel').css('top', '20%');
$('.flex-play-button').css('top', '20%');
$('.flex-pause-button').css('top', '20%');
$('.flex-next-button').css('bottom', '30%');
$('.flex-prev-button').css('bottom', '30%');
$('.flex-control-thumbs').css('position', 'static');
}
function cancelFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
$('.slide_text').css('bottom', '2%');
$('.slide_text').css('zoom', '1');
$('.flex-fullscreen-launch').css('visibility', 'visible');
$('.flex-fullscreen-cancel').css('visibility', 'hidden');
$('.flex-fullscreen-launch').css('top', '6%');
$('.flex-play-button').css('top', '6%');
$('.flex-pause-button').css('top', '6%');
$('.flex-next-button').css('bottom', '54%');
$('.flex-prev-button').css('bottom', '54%');
$('.flex-control-thumbs').css('position', 'absolute');
}
</script>
</head>
<body>
<div id="container">
<div id="div_left">
<input class="button active" type="button" value="Button 1" />
<input class="button" type="button" value="Button 2" />
<input class="button" type="button" value="Button 3" />
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<img alt="asdf" src="img/1.jpg" />
</li>
<li>
<img alt="asdf" src="img/2.jpg" />
</li>
<li>
<img alt="asdf" src="img/3.jpg" />
</li>
<li>
<img alt="asdf" src="img/4.jpg" />
</li>
<li>
<img alt="asdf" src="img/5.jpg" />
</li>
<li>
<img alt="asdf" src="img/6.jpg" />
</li>
<li>
<img alt="asdf" src="img/7.jpg" />
</li>
<li>
<img alt="asdf" src="img/8.jpg" />
</li>
</ul>
<a class="flex-fullscreen-launch" href="#" onclick="launchFullScreen(document.getElementById('slider'))"></a>
<a class="flex-fullscreen-cancel" href="#" onclick="cancelFullScreen(document.getElementById('slider'))"></a>
<a class="flex-play-button" href="#" onclick="$('#carousel').flexslider('play'); $('.flex-play-button').css('visibility', 'hidden'); $('.flex-pause-button').css('visibility', 'visible');"></a>
<a class="flex-pause-button" href="#" onclick="$('#carousel').flexslider('pause'); $('.flex-pause-button').css('visibility', 'hidden'); $('.flex-play-button').css('visibility', 'visible');"></a>
<a class="flex-next-button" href="#" onclick="$('#slider').flexslider('next');"></a>
<a class="flex-prev-button" href="#" onclick="$('#slider').flexslider('prev');"></a>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<img alt="asdf" src="img/1-small.jpg" />
</li>
<li>
<img alt="asdf" src="img/2-small.jpg" />
</li>
<li>
<img alt="asdf" src="img/3-small.jpg" />
</li>
<li>
<img alt="asdf" src="img/4-small.jpg" />
</li>
<li>
<img alt="asdf" src="img/5-small.jpg" />
</li>
<li>
<img alt="asdf" src="img/6-small.jpg" />
</li>
<li>
<img alt="asdf" src="img/7-small.jpg" />
</li>
<li>
<img alt="asdf" src="img/8-small.jpg" />
</li>
</ul>
<a class="flex-next-button" href="#" onclick="$('#carousel').flexslider('next');"></a>
<a class="flex-prev-button" href="#" onclick="$('#carousel').flexslider('prev');"></a>
</div>
</section>
</div>
</div>
</body>
</html>
【问题讨论】：
标签： javascript html css carousel flexslider