我目前正在开展一个新项目，该项目需要一个滑块，其中包含左右两侧带有缩略图的视频。我几乎已经有了我需要的布局（对于初学者），但我一生似乎无法链接缩略图以激活它的指定滑块。
例如，单击第一个拇指，滑块将前进到第一个视频，....单击第三个并滑动到第三个视频。（为了澄清，第一部分令人困惑）。
这是我的测试页。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>FlexSlider 2</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size: 100%;
background-color: #275d39;
color: #FFF;
}
#wrapper {
width: 1000px;
margin: 0 auto;
overflow: hidden; /**float containment**/
}
/**middle**/
section {
width: 56%;
float: left;
}
/**left and right**/
aside {
width: 22%;
float: left;
font-size: 13px;
}
aside img {
margin-right: 12px; /**adjust value as needed**/
vertical-align: middle;
border: 5px groove #FFF;
float: left;
}
aside p {
padding: 6px;
font-weight: bold;
min-height: 75px;
border: 2px solid #CCC;
border-bottom: none;
}
/**add bottom border to last p only**/
aside p:last-child { border-bottom: 2px solid #CCC}
/**on mouseover**/
aside p:hover {
cursor: pointer;
background: #e2ae0e;
color: #275d39;
}
footer {
clear: both;
padding-top: 45px;
padding-left: 45px;
}
</style>
<!-- Demo CSS -->
<link rel="stylesheet" href="http://www.saintleo.edu/VirtualTour/FlexSlider2/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.saintleo.edu/VirtualTour/FlexSlider2/flexslider.css" type="text/css" media="screen" />
<!-- Modernizr -->
<script src="http://www.saintleo.edu/VirtualTour/FlexSlider2/modernizr.js"></script>
</head>
<body class="loading">
<div id="wrapper">
<!--left column-->
<aside>
<p><img alt="Overview" src="http://www.saintleo.edu/VirtualTour/Images/Overview-thumb.jpg">
Overview</p>
<p><img alt="St. Leo Abbey" src="http://www.saintleo.edu/VirtualTour/Images/St.LeoAbbey-thumb.jpg">
St. Leo Abbey</p>
<p><img alt="Athletics" src="http://www.saintleo.edu/VirtualTour/Images/Athletics-thumb.jpg">
Athletics</p>
<p><img alt="Student Community Center" src="http://www.saintleo.edu/VirtualTour/Images/StudentCommunityCenter-thumb.jpg">
Student Community Center</p>
<p><img alt="School of Education & Social Services" src="http://www.saintleo.edu/VirtualTour/Images/SchoolOfEducation&SocialServices-thumb.jpeg">
School of Education & Social Services</p>
</aside>
<section>
<div id="container" class="cf">
<div id="main" role="main">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65403004?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65402645?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65402828?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65402826?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65402829?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65402827?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65403002?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65403005?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65403006?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li>
<iframe id="player_1" src="http://player.vimeo.com/video/65403007?api=1&player_id=player_1" width="560" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
</ul>
</div>
</section>
</div>
</div>
</section>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<!-- FlexSlider -->
<script defer src="http://www.saintleo.edu/VirtualTour/FlexSlider2/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
// Vimeo API nonsense
var player = document.getElementById('player_1');
$f(player).addEvent('ready', ready);
function addEvent(element, eventName, callback) {
(element.addEventListener) ? element.addEventListener(eventName, callback, false) : element.attachEvent(eventName, callback, false);
}
function ready(player_id) {
var froogaloop = $f(player_id);
froogaloop.addEvent('play', function(data) {
$('.flexslider').flexslider("pause");
});
froogaloop.addEvent('pause', function(data) {
$('.flexslider').flexslider("play");
});
}
// Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
$(".flexslider")
.fitVids()
.flexslider({
animation: "slide",
useCSS: false,
animationLoop: false,
smoothHeight: true,
start: function(slider){
$('body').removeClass('loading');
},
before: function(slider){
$f(player).api('pause');
}
});
});
</script>
<!-- Syntax Highlighter -->
<script type="text/javascript" src="http://www.saintleo.edu/VirtualTour/FlexSlider2/shCore.js"></script>
<script type="text/javascript" src="http://www.saintleo.edu/VirtualTour/FlexSlider2/shBrushXml.js"></script>
<script type="text/javascript" src="http://www.saintleo.edu/VirtualTour/FlexSlider2/shBrushJScript.js"></script>
<!-- Optional FlexSlider Additions -->
<script src="http://www.saintleo.edu/VirtualTour/FlexSlider2/froogaloop.js"></script>
<script src="http://www.saintleo.edu/VirtualTour/FlexSlider2/jquery.fitvid.js"></script>
<script src="http://www.saintleo.edu/VirtualTour/FlexSlider2/demo.js"></script>
<!--right column-->
<aside>
<p><img alt="Freshman Residence Halls" src="http://www.saintleo.edu/VirtualTour/Images/FreshmanResidenceHalls-thumb.jpg">
Freshman Residence Halls</p>
<p><img alt="School of Arts & Sciences" src="http://www.saintleo.edu/VirtualTour/Images/SchoolOfArts&Sciences-thumb.jpg">
School of Arts & Sciences</p>
<p><img alt="Residence Apartments" src="http://www.saintleo.edu/VirtualTour/Images/ResidenceApartments-thumb.jpg">
Residence Apartments</p>
<p><img alt="Student Activities Building" src="http://www.saintleo.edu/VirtualTour/Images/StudentActivitiesBuilding-thumb.jpg">
Student Activities Building</p>
<p><img alt="School of Business" src="http://www.saintleo.edu/VirtualTour/Images/SchoolOfBusiness-thumb.jpg">
School of Business</p>
</aside>
<!--begin footer-->
<footer> Your footer goes here... </footer>
<!--end wrapper-->
</div>
</body>
</html>