缩略图更改时jCarousel主图像更改

时间:2012-05-22 17:22:22

标签: javascript jquery gallery jcarousel

我搜索谷歌找到我的问题的解决方案,但找不到,请使用jCarousel查看我的代码,我试图通过小拇指改变自动更改主图片,你可以观看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&nbsp;&nbsp;&nbsp;&nbsp;<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"> &nbsp;&nbsp;/&nbsp;&nbsp;</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>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</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">&lt;</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>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</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>

0 个答案:

没有答案