0

レスポンシブ スライダーを設定しましたが、フォーカスされた画像以外のすべての画像を透明 (不透明度 50%) にしたいと考えています。フォーカスされた画像は、最も左にある画像になります。

スライダーには次のプラグインを使用しました。

http://matthewtoledo.com/creations/responsive-carousel/example/example-1.html

そしてそれを実装してください：

http://www.schafrick.com/portfolio-clients-nike.html

私の jQuery の知識は非常に乏しく、どこから始めればよいかわかりません。どんな助けでも大歓迎です。ありがとう

私が「焦点を絞った」と言うとき、私はマウスベントについて言及しているのではなく、最も左にある画像について話していることに注意してください.

4

4 に答える 4

2

カルーセルの作成者には、すでにいくつかの実装があります。

例 2

onShift メソッドは、関数を受け取るセットアップ パラメーターです。参照：Docu
私はあなたのためにそれを適応させました：

$('#example').responsiveCarousel({
    // your setup tasks
    onShift: function (i) {
        i = Math.round(i);
        var $current = $('.slider-target li[data-slide=' + i + ']');
        $('.slider-target li[data-slide]').removeClass('current');
        $current.addClass('current');
    }
});

.current クラスを使用して、現在のフレームのスタイルを設定できます。

于 2012-12-03T19:33:54.727 に答える
-1

このようなものは動作するはずですxD

$(document).ready(){

  $("img#gallery").hover(function(){
    $(this).siblings("img").fadeTo("slow",0.5)
  },
  function(){
    $(this).siblings("img").fadeTo("slow",1)
  })


}

必要に応じてコードを調整するだけです xD

于 2012-12-03T19:25:44.900 に答える
-1

このようなもの：

CSS

.slider-target img    {opacity:0.8;}

Jクエリ

$('body').on('mouseenter', '.slider-target img', function () {
    $(this).css( "opacity", "1.0" );
}).on('mouseleave', '.slider-target img', function () {
    $(this).css( "opacity", "0.8" );
});
于 2012-12-03T19:22:06.723 に答える
-1 
jQuery('.slider-target li').hover(function(e)
{
    $(this).closest('ul').find('li').not(this).fadeTo(200, 0.5);
}, function()
{
    $(this).closest('ul').find('li').not(this).fadeTo(200, 1);
});

jqueryを含めた場合、このコードは機能するはずです

于 2012-12-03T19:22:20.450 に答える