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 に答える