我正在使用FlexSlider2和缩略图滑块。然而，问题是mainimage没有响应。如果我按下Next/Prev按钮，它不会滑动/淡入到Next/Prev图像。即使我点击其中一个缩略图，它也不会改变。但是缩略图滑块的Prev/Next按钮工作很好。我就是找不到问题所在。我没有碰FlexSlider.js，而是碰了FlexSlider.css。我改变了一些东西来摆脱bordershadow等等。但我也使用了未接触的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>
在这个jsFiddle中，它起作用
JsFiddle
Hope this helps
