0

基本的に画像を水平に並べた画像スライダーを作成しようとしています (それぞれ幅が 700 ピクセルで高さが異なります)。JQuery を使用して右または左に 700 ピクセルのスライドをアニメーション化し、次の画像を表示します。私は jQuery に非常に慣れていないので、次のステップが何であるか、これを機能させるために CSS をどのようにすべきかわかりません。

jQuery

$("#slideRight").click(function() {
$("#slider").animate({right:700});
});

$("#slideLeft").click(function() {
$("#slider").animate({left:700});
});

HTML

<div id="slideButtons">
<input type="button" value="next L" id="slideLeft" />
<input type="button" value="next R" id="slideRight" />
</div>

<div id="slider">
<img src="slideTest.jpg" alt="" />
<img src="slideTest2.jpg" alt="" />
<img src="slideTest3.jpg" alt="" />
</div>

CSS

#slider {
height: auto;
width: 700px;
position: relative;
background-color: blue; 
}
4

1 に答える 1

0

画像スライダーの作成に本当に興味があるなら、私がすぐに作成できる方法をここに示します。

注: - スライダーを実現するために非表示と表示の方法を使用しました。これを使用して実現できる方法はたくさんあります。コードを直接使用するのではなく、ロジックに従ってください。

ロジックはシンプル

  1. 値が連続した整数に設定された ID を持つイメージを生成します
  2. プロパティ display none を設定して、すべての画像を非表示にします
  3. 最初の要素を可視にする
  4. 次に、次のボタンがクリックされたときに、最後の画像にいるかどうかを確認し、そうであれば最初の画像を表示し、そうでない場合は次の画像を表示します
  5. 次の画像を見つけるには、現在表示されている画像 ID を取得し、それに 1 を追加して、次の連続する画像を取得します。
  6. 同様に、前の画像を減算して前の画像を表示できます
  7. 前の画像を表示しているときに、最初の画像を表示しているかどうかを確認する必要があります。そうであれば、最後の画像を表示します。それ以外の場合は、手順 6 に従って ID を計算して前の画像を表示します

これは、この質問のために作成しようとしたサンプルの大まかなコードです（テストされていません）

// First make the first image visible 
$(".slide-content img:first-child").show();

// Bind the click handler 
$("#slideRight").click(function() {

// if there is only one image in the slider then return false 
if($(".slide-content > img").length == 1)
{
    return false;

}

// Set current to the visible element 
var current = $(".slide-content > img:visible").attr('id');

// hide the visible element 
$('#'+current).hide();


if(current == $(".slide-content > img").length ) 
{
    current = 1;    
}
else
{
    current = parseInt(current)+1;  
}

$('#'+current).show();


});

$("#slideLeft").click(function() {
if($(".slide-content > img").length == 1)
{
    return false;

}

var current = $(".slide-content  > img:visible").attr('id');
$('#'+current).hide();
if(current == 1) 
{
    current = $(".slide-content > img").length; 
}
else
{
    current = parseInt(current)-1;  
}

$('#'+current).show();


});

<div id="slideButtons">
<input type="button" value="next L" id="slideLeft" />
<input type="button" value="next R" id="slideRight" />
</div>

<div class="slide-content">
<img id = '1' src="slideTest.jpg" alt="" />
<img id = '2' src="slideTest2.jpg" alt="" />
<img id = '3' src="slideTest3.jpg" alt="" />
</div>
于 2012-09-10T17:16:07.863 に答える