我一直在客户网站上做一些听起来与您想要达到的效果非常相似的事情。我从与外部控制方法相同的路线开始,但这并没有给我足够的灵活性。
我的解决方案是执行以下操作(抱歉 - 会分叉你的 jsfiddle,但我认为这会更快更干净。
首先设置标记:
<a rel="0" class="slide_thumb" href="#">slide link 1</a>
<a rel="1" class="slide_thumb" href="#">slide link 2</a>
<a rel="2" class="slide_thumb" href="#">slide link 3</a>
<div class="flexslider">
<ul class="slides">
<li>
<img src="demo-stuff/inacup_samoa.jpg" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<a href="http://flex.madebymufffin.com"><img src="demo-stuff/inacup_pumpkin.jpg" /></a>
<p class="flex-caption">This image is wrapped in a link!</p>
</li>
<li>
<img src="demo-stuff/inacup_donut.jpg" />
</li>
<li>
<img src="demo-stuff/inacup_vanilla.jpg" />
</li>
<li>
<img src="demo-stuff/inacup_vanilla.jpg" />
</li>
</ul>
</div>
注意链接上的 rel 属性——我们将在下面使用它们。另请注意,值从 0 开始 - 这与幻灯片的值匹配(例如,第一张幻灯片是 0,第二张是 1 等)。
您应该在 CSS 中的 flexslider div 上将可见性设置为无。(一种更方便的方法是使用绝对定位将滑块隐藏在屏幕外,并根据要求将其重新显示,但为了保持简单,我将坚持显示/隐藏)
接下来设置您对 flexslider 插件的调用:
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($) {
$('.flexslider').flexslider({
animation: "slide",
slideshow: false,
animationLoop: false,
directionNav: true,
slideToStart: 0,
start: function(slider) {
$('a.slide_thumb').click(function() {
$('.flexslider').show();
var slideTo = $(this).attr("rel")//Grab rel value from link;
var slideToInt = parseInt(slideTo)//Make sure that this value is an integer;
if (slider.currentSlide != slideToInt) {
slider.flexAnimate(slideToInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want);
}
});
}
});
});
</script>
当用户单击您的链接之一并将滑块移动到正确的位置时,这应该会显示您的幻灯片。这只是一个起点,我应该指出这是我正在使用的代码的一个非常精简的版本,所以这基本上是未经测试的。应该给你一个体面的平台来工作。遇到问题大声喊叫