Question

大家！

我对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>

非常感谢你的帮助！

Answer 1

首先，你的旋转木马都在调用相同的初始化回调方法，我猜这不是你想要的。所以而不是：

    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;
      });
}

...虽然如果我是你，我会做很多重构，因为你的代码中有很多不一致的地方，并不是特别容易理解。您还需要处理加载到下部轮播中的图像当前未显示在顶部轮播中的情况，您需要向前或向后移动顶部轮播。

我需要一个jCarousel画廊的帮助

1 个答案: