我需要一個畫廊的幫助，每個人都有jCarousel

我有一個jCarousel的問題，所以我真的需要你的幫助。

這裏的畫廊： http://tranzit.dir.bg/load.php?id=TdVijCkhJSrC7CkA1273310

我的問題是如何能夠使腳本所以當你點擊箭頭（黑色的小方塊）的選擇（在小圖片中紅色邊框）大的圖像（向前和向後）再次向前和向後移動。現在只有小圖像在移動......我想這個問題並不大，但我做不到。

例如：themeforest.s3.amazonaws.com/86_jquery/gallery.html

我的代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
     <link rel="stylesheet" type="text/css" href="jcarousel_tango.css" /> 
     <link rel="stylesheet" type="text/css" href="jcarousel_showcase.css" /> 

     <script type="text/javascript" src="jquery.min.js"></script>   
     <script type="text/javascript" src="jquery.jcarousel.min.js"></script> 

    <script type="text/javascript"> 

function mycarousel_initCallback(carousel) {  
    jQuery('.jcarousel-next').click(function() { 
     jQuery('.jcarousel-item').removeClass('highliht'); 
     jQuery(this).addClass('highliht'); 

     jQuery('.jcarousel-control a').removeClass('active'); 
     jQuery('.jcarousel-control a#cnt-'+jQuery(this).attr('jcarouselindex')).addClass('active'); 
     carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr('jcarouselindex'))); 

     return false; 
    }); 

function mycarousel_initCallbackanother(carousel) { 
    jQuery('.jcarousel-skin-showcase div.jcarousel-next').click(function(){ 
      jQuery('.jcarousel-control a#cnt-1').addClass('active'); 
jQuery('#mycarousel li:first').addClass('highliht'); 
    //chage position on mycarousel 
    }); 
} 

} 

jQuery(document).ready(function() { 
    jQuery('.tabcontent a#cnt-1').addClass('active'); 
    jQuery('#mycarousel li:first').addClass('highliht'); 

    jQuery('#mycarousel').jcarousel({ 
     btnNext: ".next", 
     btnPrev: ".prev", 
     visible: 7, 
     scroll: 6, 
     initCallback: mycarousel_initCallback 
    }); 

     jQuery('#showcasecarousel').jcarousel({ 
     scroll: 1, 
     animation: 1, 
     initCallback: mycarousel_initCallback, 
     itemLoadCallback: trigger 
    }); 

    function trigger(carousel, state) 
    { 
    $("#currentImg").html(carousel.first); 
    } 

}); 
</script> 

    </head> 
    <body> 
     <div id="wrap"> 
      <div id="postcolumn"> 
       <!-- post zone --> 
       <div class="photobox"> 
        <div id="post-213" class="photopost"> 
        <div id="mycarousel" class="jcarousel-skin-tango"> 
         <ul class="photos" id="photos"> 
          <li><a class="" rel="1" href="#"><img title="" alt="" src="img/1t.jpg"></a></li> 
          <li><a class="" rel="2" href="#"><img title="" alt="" src="img/2t.jpg"></a></li> 
          <li><a class="" rel="3" href="#"><img title="" alt="" src="img/3t.jpg"></a></li> 
          <li><a class="" rel="4" href="#"><img title="" alt="" src="img/4t.jpg"></a></li> 
          <li><a class="" rel="5" href="#"><img title="" alt="" src="img/5t.jpg"></a></li> 
          <li><a class="" rel="6" href="#"><img title="" alt="" src="img/6t.jpg"></a></li> 
          <li><a class="" rel="7" href="#"><img title="" alt="" src="img/7t.jpg"></a></li> 
          <li><a class="" rel="8" href="#"><img title="" alt="" src="img/8t.jpg"></a></li> 
          <li><a class="" rel="9" href="#"><img title="" alt="" src="img/9t.jpg"></a></li> 
          <li><a class="" rel="10" href="#"><img title="" alt="" src="img/10t.jpg"></a></li> 
          <div class="clear"> 
          </div> 
         </ul> 
         </div> 
         <div class="clear"> 
         </div> 

         <ul id="showcasecarousel" class="jcarousel-skin-showcase"> 
          <li><img title="" alt="" src="img/1.jpg"></a></li> 
          <li><img title="" alt="" src="img/2.jpg"></a></li> 
          <li><img title="" alt="" src="img/3.jpg"></a></li> 
          <li><img title="" alt="" src="img/4.jpg"></a></li> 
          <li><img title="" alt="" src="img/5.jpg"></a></li> 
          <li><img title="" alt="" src="img/6.jpg"></a></li> 
          <li><img title="" alt="" src="img/7.jpg"></a></li> 
          <li><img title="" alt="" src="img/8.jpg"></a></li> 
          <li><img title="" alt="" src="img/9.jpg"></a></li> 
          <li><img title="" alt="" src="img/10.jpg"></a></li> 
         </ul> 
         Current Photo <span id="currentImg">1</span> 

        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

非常感謝你的幫助！

來源

2012-07-08 Alabala

首先，你的兩個傳送帶都調用相同的初始化回調方法，我猜測它並不是你想要的。因此，而不是：

jQuery('#showcasecarousel').jcarousel({ 
    scroll: 1, 
    animation: 1, 
    initCallback: mycarousel_initCallback, 
    itemLoadCallback: trigger

你可能想：

jQuery('#showcasecarousel').jcarousel({ 
    scroll: 1, 
    animation: 1, 
    initCallback: showcasecarousel_initCallback, 
    itemLoadCallback: trigger

然後，你需要創建函數showcasecarousel_initCallback。下面會做你想要的工作：

function showcasecarousel_initCallback(carousel) { 
     jQuery('.jcarousel-skin-showcase div.jcarousel-next').click(function() { 
      if (carousel.first < 10) { 
       jQuery('#mycarousel li.jcarousel-item').removeClass('highliht'); 
       jQuery('#mycarousel .jcarousel-item-' + (carousel.first + 1)).addClass('highliht'); 
      } 
      return false; 
     }); 

     jQuery('.jcarousel-skin-showcase div.jcarousel-prev').click(function() { 
      if (carousel.first > 1) { 
       jQuery('#mycarousel li.jcarousel-item').removeClass('highliht'); 
       jQuery('#mycarousel .jcarousel-item-' + (carousel.first - 1)).addClass('highliht'); 
      } 
      return false; 
     }); 
}

......雖然，如果我是你，我會做大量的重構是有不一致的代碼中的相當數量，它不是特別容易。您還需要處理加載到下部傳送帶中的圖像當前未顯示在頂部傳送帶中的情況，您需要向前或向後移動頂部傳送帶。

來源

2012-07-08 10:06:50 soupy1976

非常感謝你的幫助。現在選擇器（紅色邊框）正在小圖像上移動。我該怎麼做，所以選擇器不能隱藏？我需要它，所以當它（選擇器）到達小圖像的末尾時，它們也應該滾動。我的另一個問題是如何讓小圖像的滾動條向兩個方向移動？現在，當你點擊它們時，小圖像只能朝着正確的方向移動。我是否可以像在示例中那樣做 - 當您單擊圖像時，根據圖像的位置向左或向右移動。 – Alabala 2012-07-09 14:56:20

我需要一個畫廊的幫助，每個人都有jCarousel

回答

相關問題