0

大家！

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

非常感谢你的帮助！

4

1 回答 1

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

...尽管如果我是您，我会进行大量重构，因为您的代码中存在大量不一致之处，并且不容易遵循。您还需要处理加载到下部轮播中的图像当前未显示在顶部轮播中的情况，您需要向前或向后移动顶部轮播。

于 2012-07-08T10:06:50.963 回答