2

ここで、もう 1 つ難しい課題があります。

ここで私のjsfiddleをクリックしてください：

このjQuery プラグインをアルバムに使用しています。ユーザーが写真をクリックするたびにアイテムを強調表示したい。されております ！

以下は、アルバムをトリガーする関数です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" />-->
<style>
.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
   border-radius: 10px;
    background: #F0F6F9;
    border: 1px solid #346F97;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 300px;
    padding: 20px 40px;

}
.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width: 300px;
    height: 75px;
    overflow:hidden;
}
.jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 10px;
}/*
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
    margin-left: 10px;
    margin-right: 0;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
} */

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://sorgalla.com/projects/jcarousel/skins/tango/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(http://sorgalla.com/projects/jcarousel/skins/tango/prev-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://sorgalla.com/projects/jcarousel/skins/tango/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url(next-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover, 
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}
</style>
<script>
 $(document).ready(function(){
     jQuery('#mycarousel').jcarousel({
        scroll:2,
        animation:'slow',
        wrap:'last',
        initCallback:function(){
             $("#mycarousel li:eq(0)").css('border','2px solid gray');
            }
     });

     $("#mycarousel li").click(function(){
         $("#mycarousel li").css('border','none');
         $(this).css('border','2px solid gray');
     });

     });
</script>

<title>Untitled Document</title>
</head>

<body>


<ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>

</ul>

</body>
</html>

今、私が欲しいのは、ユーザーが次または前の矢印をクリックするたびに、最初に表示されるアイテムが境界線で強調表示されることです。

これを行うために機能する適切な構成を使用できますか? 以下はプラグイン ドキュメントのリンクです http://sorgalla.com/projects/jcarousel/#Configuration

4

1 に答える 1

1

強調表示される画像にユーザー定義クラスを追加し、このクラスを持つ要素に基づいて、次と前のボタンの 2 つのクリック イベントを使用しcurrentて、次または前の画像の強調表示を管理しました。current

作業スクリプトは次のとおりです。

 $(document).ready(function(){
    jQuery('#mycarousel').jcarousel({
        scroll:2,
        animation:'slow',
        wrap:'last',
        initCallback:function(){
             $("#mycarousel li:eq(0)").css('border','2px solid gray');
     $("#mycarousel li:eq(0)").addClass("current");
         }
     });

     $("#mycarousel li").click(function(){
         $("#mycarousel li").css('border','none');
     $("#mycarousel li").removeClass('current');
         $(this).css('border','2px solid gray');
     $(this).addClass('current');
     });

 $(".jcarousel-next-horizontal").click(function(){
    $(".current").css('border', 'none');
    $(".current").next().css('border', '2px solid gray');
    $(".current").removeClass('current').next().addClass('current');
 });
 $(".jcarousel-prev-horizontal").click(function(){
    $(".current").css('border', 'none');
    $(".current").prev().css('border', '2px solid gray');
    $(".current").removeClass('current').prev().addClass('current');
 });
  });
于 2013-03-08T01:01:35.213 に答える