我需要一个画廊的帮助，每个人都有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

回答

相关问题