我已经在谷歌上搜索了我的问题的解决方案但找不到，请看一下我使用 jCarousel 的代码，我正在尝试用小拇指的变化使主图片自动变化，你可以看到一个 live演示在http://www.misslebanon2010.com/urbana/index.php
滚动条可以工作，但我需要橙色边框才能进入下一个缩略图，并根据当前缩略图更改相应的主照片
编码 ：
<script type="text/javascript">
$(document).ready(function () {
//jCarousel Plugin
$('#carousel').jcarousel({
vertical: true,
scroll: 1,
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
//Combine jCarousel with Image Display
$('#slideshow-carousel li a').hover(
function () {
if (!$(this).has('span').length) {
$('#slideshow-carousel li a img').stop(true, true).css({'border': '2px #ccc solid'});
$(this).stop(true, true).children('img').css({'border':'2px orange solid'});
}
},
function () {
$('#slideshow-carousel li a img').stop(true, true).css({'border': '2px #ccc solid'});
$('#slideshow-carousel li a').each(function () {
if ($(this).has('span').length) $(this).children('img').css({'border':'2px orange solid'});
});
}
).click(function () {
$('span.arrow').remove();
$('#frtitle').html($(this).find("img").attr('title'));
$('#desc').html($(this).find("img").attr('alt'));
$(this).append('<span class="arrow"></span>');
$('#slideshow-main li').removeClass('active');
$('#slideshow-main li.' + $(this).attr('rel')).addClass('active');
return false;
});
});
function mycarousel_initCallback(carousel) {
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
}
</script>
我需要修改这段代码，以便让照片自动变化，拇指和相应的大照片。
编辑：
完整的 HTML 代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Urbana Acceuil</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="css/skin.css" />
<script type="text/javascript">
$(document).ready(function () {
//jCarousel Plugin
$('#carousel').jcarousel({
vertical: true,
scroll: 1,
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
//Combine jCarousel with Image Display
$('#slideshow-carousel li a').hover(
function () {
if (!$(this).has('span').length) {
$('#slideshow-carousel li a img').stop(true, true).css({'border': '2px #ccc solid'});
$(this).stop(true, true).children('img').css({'border':'2px orange solid'});
}
},
function () {
$('#slideshow-carousel li a img').stop(true, true).css({'border': '2px #ccc solid'});
$('#slideshow-carousel li a').each(function () {
if ($(this).has('span').length) $(this).children('img').css({'border':'2px orange solid'});
});
}
).click(function () {
$('span.arrow').remove();
$('#frtitle').html($(this).find("img").attr('title'));
$('#desc').html($(this).find("img").attr('alt'));
$(this).append('<span class="arrow"></span>');
$('#slideshow-main li').removeClass('active');
$('#slideshow-main li.' + $(this).attr('rel')).addClass('active');
return false;
});
});
function mycarousel_initCallback(carousel) {
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
}
</script>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana;
font-size: 11px;
color: #EFF1F5;
}
body {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/rightlightgrey.jpg);
}
.leftgrey {
color: #8E98A8
}
.styleleftbarorange {
color: #C85E08;
font-size: 14px;
}
.arroworange {font-size: 24px}
.style5 {
font-size: 24px;
color: #C85E08;
font-weight: bold;
}
.facebook {
color: #CFD4DD;
text-decoration: none;
}
.menu {
font-size: 12px;
text-decoration: none;
color: #EFF1F5;
}
.style9 {color: #FF0000}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.menu11 {
font-size: 11px;
text-decoration: none;
color: #EFF1F5;
}
/* Slide Show */
img {
border:0;
}
#slideshow-main {
width:950px;
top:0px;
padding:0px;
height: 511px;
}
#slideshow-main ul {
margin:0;
padding:0;
width:952px;
}
#slideshow-main li {
width:952px;
height:511px;
display:none;
position:relative;
}
#slideshow-main li.active {
display:block !important;
}
#slideshow-main li span.opacity {
position:absolute;
bottom:28px;
left:5px;
display:block;
width:944px;
height:60px;
background:#000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index:500;
}
#slideshow-main li span.content {
position:absolute;
bottom:26px;
left:-4px;
display:block;
width:100%;
height:60px;
z-index:1000;
}
#slideshow-main li span.content h1 {
font-size:14px;
margin:5px 0;
padding:0 10px;;
color:#42e2e8;
}
#slideshow-main li span.content p {
font-size:11px;
margin:5px 0;
padding:0 10px;;
color:#42e2e8;
}
#slideshow-carousel {
float:left;
width:86px;
position:relative;
overflow:hidden;
}
#slideshow-carousel ul {
margin:0;
padding:0;
list-style:none;
}
#slideshow-carousel li {
background:#fff;
height:70px;
position:relative;
width: 89px;
}
#slideshow-carousel li img {
margin-bottom:2px;
}
#slideshow-carousel li a img {border:2px #ccc solid;}
#slideshow-carousel li a {
display:block;
width:86px;
height:69px;
}
#slideshow-carousel .active {
filter:alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
}
#slideshow-carousel .faded {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#thumbs-carousel {
overflow:hidden;
position:relative;
height:464px;
padding-left:1px;
list-style:none;
}
-->
</style>
<script type="text/javascript">
/*<![CDATA[*/
function Scroll(id,ud,spd){
var obj=document.getElementById(id);
clearTimeout(obj.to);
if (ud){
obj.scrollTop=obj.scrollTop+ud;
obj.to=setTimeout(function(){ Scroll(id,ud,spd); },spd||10)
}
}
/*]]>*/
</script>
</head>
<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" background="images/topgrey.jpg"></td>
<td align="center" valign="bottom" background="images/topgrey.jpg"><table width="1250" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/spacer.gif" alt="a" width="1" height="25" /></td>
<td><img src="images/spacer.gif" alt="a" width="160" height="1" /></td>
<td></td>
<td></td>
<td><img src="images/spacer.gif" alt="a" width="60" height="1" /></td>
<td></td>
<td></td>
<td></td>
<td><img src="images/spacer.gif" alt="a" width="94" height="1" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><img src="images/spacer.gif" alt="a" width="185" height="1" /></td>
<td>suivez-nous sur <a href="http://www.facebook.com/urbanacanada" class="facebook">facebook</a></td>
<td><img src="images/spacer.gif" alt="a" width="4" height="1" /></td>
<td><span class="facebook"><a href="http://www.facebook.com/urbanacanada" target="_blank"><img src="images/facebook.png" alt="fb" width="20" height="19" border="0" /></a></span></td>
<td><span class="facebook"> / </span><a href="https://twitter.com/#!/urbana" class="facebook">twitter</a> </td>
<td><img src="images/spacer.gif" alt="a" width="4" height="1" /></td>
<td><span class="facebook"><a href="https://twitter.com/#!/urbana" target="_blank"><img src="images/twitter.png" alt="tw" width="19" height="19" border="0" /></a></span></td>
<td><img src="images/spacer.gif" alt="a" width="44" height="1" /></td>
<td><a href="liste.html" class="menu11">liste de souhaits</a></td>
<td><img src="images/spacer.gif" alt="a" width="6" height="1" /></td>
<td><img src="images/souhaiticon.png" alt="a" width="17" height="19" /></td>
<td><img src="images/spacer.gif" alt="a" width="309" height="1" /></td>
<td><a href="english/index.html" class="menu11">english</a> / <strong>français</strong></td>
<td><img src="images/spacer.gif" alt="a" width="60" height="1" /></td>
<td><img src="images/soundon.png" alt="a" width="15" height="19" /></td>
<td><img src="images/spacer.gif" alt="a" width="124" height="1" /></td>
</tr>
<tr>
<td colspan="16"><img src="images/spacer.gif" alt="a" width="1" height="7" /></td>
</tr>
</table></td>
<td align="center" background="images/topgrey.jpg"></td>
</tr>
<tr>
<td align="center" valign="top" background="images/rightlightgrey.jpg"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td width="1250" valign="top"><table width="1250" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
<tr>
<td rowspan="2" valign="top" background="images/rightlightgrey.jpg"><table width="174" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/spacer.gif" alt="a" width="1" height="160" /></td>
<td></td>
<td></td>
</tr>
<tr>
<td><img src="images/spacer.gif" alt="a" width="1" height="26" /></td>
<td align="right" class="styleleftbarorange"><table width="138" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right" class="styleleftbarorange">Modèle <strong><span id="frtitle">Astor</span></strong></td>
<td align="right"><span class="style5"><</span></td>
</tr>
</table></td>
<td></td>
</tr>
<tr>
<td><img src="images/spacer.gif" alt="a" width="1" height="60" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="166" height="1" /></td>
<td></td>
</tr>
<tr>
<td><img src="images/spacer.gif" alt="a" width="1" height="86" /></td>
<td align="right"><span class="leftgrey" id="desc">Importé d'Espagne,<br />
ce modèle vous est<br />
offert en plusieurs couleurs,<br />
plusieurs tissus et<br />
plusieurs dimensions.</span></td>
<td></td>
</tr>
<tr>
<td><img src="images/spacer.gif" alt="a" width="4" height="126" /></td>
<td align="center"></td>
<td><img src="images/spacer.gif" alt="a" width="4" height="126" /></td>
</tr>
</table></td>
<td rowspan="2">
<div id="slideshow-main">
<ul>
<li class="p1 active">
<a href="#">
<img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/image-G3ZI4ECXLHZSGWA.jpg" width="952" height="511" alt=""/></a>
</li> <li class="p2">
<a href="#">
<img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/image-SJCX0K9DMLR0OLJ.jpg" width="952" height="511" alt=""/></a>
</li> <li class="p3">
<a href="#">
<img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/image-76YRTEM4KJLL0D2.jpg" width="952" height="511" alt=""/></a>
</li> <li class="p4">
<a href="#">
<img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/image-LR3OS96YMVGPN0D.jpg" width="952" height="511" alt=""/></a>
</li> <li class="p5">
<a href="#">
<img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/image-AN8AHB2KOG0YHMZ.jpg" width="952" height="511" alt=""/></a>
</li> <li class="p6">
<a href="#">
<img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/image-COVLIU0U7P06WND.jpg" width="952" height="511" alt=""/></a>
</li> </ul></div>
</td>
<td><table width="123" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="86" border="0" cellspacing="0" cellpadding="0">
<!--<tr>
<td><a href="#" onmousedown="Scroll('thumbs-carousel',-1);" onmouseup="Scroll('thumbs-carousel');" onmouseout="Scroll('thumbs-carousel');" ><img src="images/toparrow.jpg" alt="a" width="86" height="62" /></a></td>
</tr>-->
<!--Load Here-->
<tr>
<td>
<div id="slideshow-carousel">
<div id="thumbs-carousel">
<ul id="carousel" class="jcarousel jcarousel-skin-tango">
<li><a href="#" rel="p1"><img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/thumbs/image-G3ZI4ECXLHZSGWA.jpg" alt="Le Test" width="80" height="65" title="Canapé" id="thumb" /></a></li>
<li><a href="#" rel="p2"><img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/thumbs/image-SJCX0K9DMLR0OLJ.jpg" alt="test" width="80" height="65" title="canapes" id="thumb" /></a></li>
<li><a href="#" rel="p3"><img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/thumbs/image-76YRTEM4KJLL0D2.jpg" alt="Importé d'Espagne,
ce modèle vous est
offert en plusieurs couleurs,
plusieurs tissus et
plusieurs dimensions" width="80" height="65" title="Danzka" id="thumb" /></a></li>
<li><a href="#" rel="p4"><img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/thumbs/image-LR3OS96YMVGPN0D.jpg" alt="Alfredo Testing" width="80" height="65" title="Alfredo" id="thumb" /></a></li>
<li><a href="#" rel="p5"><img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/thumbs/image-AN8AHB2KOG0YHMZ.jpg" alt="Raviolla Modele" width="80" height="65" title="Raviolla" id="thumb" /></a></li>
<li><a href="#" rel="p6"><img src="http://misslebanon2010.com/urbana/new/admin/images/homepage/thumbs/image-COVLIU0U7P06WND.jpg" alt="" width="80" height="65" title="Munich" id="thumb" /></a></li> </ul>
</div>
</div>
<!-- End Here -->
</td>
</tr>
<!-- <tr>
<td><a href="#" onmousedown="Scroll('thumbs-carousel',1);" onmouseup="Scroll('thumbs-carousel');" onmouseout="Scroll('thumbs-carousel');"><img src="images/bottomarrow.jpg" alt="a" width="86" height="61" /></a></td>
</tr>-->
</table></td>
<td><img src="images/spacer.gif" alt="a" width="38" height="1" /></td>
</tr>
</table></td>
</tr>
<tr>
<td background="images/bottomgreyright.jpg"><img src="images/spacer.gif" width="1" height="43" /></td>
</tr>
</table></td>
<td align="center" valign="top" background="images/mix.jpg"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table> </td>
</tr>
<tr>
<td align="center" valign="top"></td>
<td align="center" valign="top"><table width="1250" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td background="images/rightlightgrey.jpg"><img src="images/spacer.gif" width="174" height="1" /></td>
<td background="images/bottomgrey.jpg"><img src="images/spacer.gif" alt="" width="952" height="1" /></td>
<td background="images/bottomgrey.jpg"><img src="images/spacer.gif" alt="" width="124" height="1" /></td>
</tr>
<tr>
<td align="center" background="images/rightlightgrey.jpg"><table width="174" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spacer.gif" alt="a" width="1" height="110" /></td>
<td align="center"><a href="index.html"><img src="images/logo1.jpg" alt="logo urbana" width="124" height="99" border="0" /></a></td>
<td><img src="images/spacer.gif" alt="a" width="1" height="110" /></td>
</tr>
</table></td>
<td background="images/bottomgrey.jpg"><table width="952" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/spacer.gif" alt="a" width="1" height="7" /></td>
</tr>
<tr>
<td><img src="images/spacer.gif" alt="a" width="1" height="20" /></td>
</tr>
<tr>
<td align="right"><img src="images/spacer.gif" alt="a" width="1" height="5" /></td>
</tr>
<tr>
<td align="right"><table width="550" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="index.html" class="menu">acceuil</a></td>
<td align="center"></td>
<td align="center"><span class="menu">/</span></td>
<td align="center"></td>
<td align="center"><a href="produits.php?catid=1" class="menu">produits</a></td>
<td align="center"></td>
<td align="center"><span class="menu">/</span></td>
<td align="center"></td>
<td align="center"><a href="promo.html" class="menu">promo</a></td>
<td align="center"></td>
<td align="center"><span class="menu">/</span></td>
<td align="center"></td>
<td align="center"><a href="companie.html" class="menu">companie</a></td>
<td align="center"></td>
<td align="center"><span class="menu">/</span></td>
<td align="center"></td>
<td align="center"><a href="contacts.html" class="menu">contacts</a></td>
<td></td>
</tr>
<tr>
<td colspan="18"><img src="images/spacer.gif" alt="a" width="1" height="5" /></td>
</tr>
<tr>
<td align="center"><img src="images/line.png" alt="a" width="44" height="3" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="25" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="5" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="25" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="54" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="25" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="5" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="25" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="45" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="25" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="5" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="25" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="58" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="25" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="5" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="25" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="54" height="1" /></td>
<td align="center"><img src="images/spacer.gif" alt="a" width="80" height="1" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="right"><img src="images/spacer.gif" alt="a" width="1" height="20" /></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><table width="952" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spacer.gif" alt="a" width="26" height="1" /></td>
<td><img src="images/spacer.gif" alt="a" width="284" height="1" /></td>
<td><img src="images/spacer.gif" alt="a" width="310" height="1" /></td>
<td><img src="images/spacer.gif" alt="a" width="190" height="1" /></td>
<td><img src="images/spacer.gif" alt="a" width="72" height="1" /></td>
<td><img src="images/spacer.gif" alt="a" width="70" height="1" /></td>
</tr>
<tr>
<td></td>
<td>© urbana mobilier inc 2012. tous droits réservés</td>
<td></td>
<td><a href="contacts.html" class="menu11">inscrivez-vous à notre newsletter</a></td>
<td></td>
<td><a href="plan.html" class="menu11">plan du site</a></td>
</tr>
</table></td>
</tr>
</table></td>
<td background="images/bottomgrey.jpg"></td>
</tr>
</table></td>
<td align="center" valign="top" background="images/bottomgrey.jpg"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>