2

既存の jQuery スライドショーを開発または使用することを検討しています。

スライド ショーの特徴は次のとおりです。

同じ画像プールを使用し、2 つ以上のボックスに同じ画像を同時に表示することなく、ボックスの画像を個別に回転させる 5 つのボックスがあります。

次のようになります。

ここに画像の説明を入力

各ボックスには、回転 (フェード) 画像が表示されます。

この効果を達成するにはどうすればよいですか？それを作成する既存のプラグインを知っていますか?

ありがとう

4

2 に答える 2

1

jsBin デモ

fademe jQuery プラグインの使用:

HTML:

<div class="boxes"></div>

CSS:

.box{
  width:100px;
  height:100px;
  border:4px solid #000;
  margin:5px;
  float:left;
}
.box img{
  position:absolute;
}

jQuery:

// IMAGES ARRAY:
images = [
  'http://placehold.it/100x100/cf5&text=1',
  'http://placehold.it/100x100/adf&text=2',
  'http://placehold.it/100x100/468&text=3',
  'http://placehold.it/100x100/953&text=4',
  'http://placehold.it/100x100/583&text=5',
  'http://placehold.it/100x100/f27&text=6',
  'http://placehold.it/100x100/48f&text=7'
];

// GENERATE BOXES
for(i=0;i<5;i++){
 $('.boxes').append('<div class="box"/>');
}

// APPEND ALL IMAGES TO EACH BOX
for(i=0;i<images.length;i++){
 $('.box').append('<img src="'+ images[i] +'" />');
}

// APPLY fademe plugin TO EACH BOX
for(i=0;i<5;i++){
 $('.box').eq(i).fademe(0,0,i+1);  // the 3rd value is the 'S' ooption (starting slide number)
}
于 2012-10-14T11:16:23.590 に答える
0

まだ見ていない場合は、jQuery SlideJSプラグインを確認することをお勧めします。

さまざまな例については、これを確認してください

<script>
        $(function(){
            $("#slides").slides();
        });
    </script>

<body>
    <div id="slides">
        <div class="slides_container">
            <div>
                <img src="img1">
            </div>
            <div>
                <img src="img2">
            </div>
        </div>
    </div>
</body>

カスタム オプションを組み合わせることもできます。

$(function(){
      $("#slides").slides({
        preload: true,
        preloadImage: '/img/loading.gif',
        play: 5000,
        pause: 2500,
        hoverPause: true
      });
    });
于 2012-10-14T10:55:50.687 に答える