0

テキスト画像のペアのリストがあり、サイクルサイクリングが必要です。他に特別なニーズがなければ大丈夫です。

しかし、このリストのすべての要素を表示したいが、すべての要素を循環させたくない場合はどうなりますか?

slideExprオプションを試しましたが、私の場合ではないと思います。手がかりが見つかりません、何かが足りないのですか、それともこのオプションがありませんか?

編集:

私が取得したいのは、4つのテキストリンクすべてが表示されているが、そのうちの2つだけがサイクルで選択されており、サイクリング画像のみが表示されていることです。

HTML:

<div id="slideshow">
<img class="presentImage" src="http://jquery.malsup.com/cycle/images/beach1.jpg" width="200" height="200" />
<img class="" src="http://jquery.malsup.com/cycle/images/beach2.jpg" width="200" height="200" />
<img class=""  src="http://jquery.malsup.com/cycle/images/beach3.jpg" width="200" height="200" />
<img class="presentImage" src="http://jquery.malsup.com/cycle/images/beach4.jpg" width="200" height="200" />

JS:

$(document).ready(
    function()
    {  
        var str = '<h2 class="clienti">xxxxx</h2>'+
            '<div id="past_clients" style="padding-top:60px; height:435px;">';
        var titles =
            [   '<div><h3 style="margin-top:0;">yyyyy</h3><a class="client" href="#" style="width:130px; display:block;">&bull; img 1</a></div>',
             '<div><a class="client" href="#">&bull; img2</a></div>',
             '<div><a class="client" href="#">&bull; img3</a></div>',
             '<div><a class="client" href="#">&bull; img4</a></div></div>'
            ];
        $('#slideshow').before(str).cycle({
            fx:     'fade',
            speed:  'fast',
            timeout: 2000,
            slideExpr: '.presentImage',
            pager: '#past_clients',
            pagerAnchorBuilder: function (index) { return titles[index]; }
        });
    }
);

ここでそれを見つけることができます:ありがとう

4

2 に答える 2

1

次に、slideExprを使用した例を示します。

CSS

img {
    position:relative;
    left:200px;
}

HTML

<div id="slideshow" class="pics"> 
    <font size="-1"> 
        <img class="test" src="http://jquery.malsup.com/cycle/images/beach1.jpg" width="200" height="200" /> 
        <img src="http://jquery.malsup.com/cycle/images/beach2.jpg" width="200" height="200" /> 
        <img class="test" src="http://jquery.malsup.com/cycle/images/beach3.jpg" width="200" height="200" /> 
    </font> 
</div>

Javascript

$('#slideshow').cycle({ slideExpr: '.test' });

とフィドル: http: //jsfiddle.net/wgN8x/

cssを追加して画像を表示しました。そうしないと、循環していないものが2つの背後に隠れてしまうためです。

編集:更新

OPが質問を更新したことに気づきました。重要なポイントを反映するようにフィドルを変更しました。

  1. サイクル内の画像のみが表示されます(CSS)
  2. すべてのアンカーを表示する必要があります(JS)
  3. アンカーは、インデックスに相当する画像にリンクする必要があります。すなわち。サイクルに画像が2つしかない場合でも、4番目のアンカーがマークアップの4番目の画像をトリガーします。これが要件であるかどうかはわかりませんが、私には理にかなっています。これはフィドルで見ることができます。

これが私の更新です:http://jsfiddle.net/lnrb0b/MEN7Y/43/

于 2013-02-04T09:07:57.240 に答える
0

それぞれjquery関数をチェックしてください。

。各()

于 2013-02-04T08:54:11.430 に答える