Jquery：画像スライダーの最上部の画像のみを表示

HTML、CSS、Jqueryを使用して基本的な画像スライダーを構築しようとしています。左（750ピクセル）移動中は一番上の画像のみが移動し、残りの画像は表示されません。Jquery：画像スライダーの最上部の画像のみを表示

これは、一番上の画像だけではなく、一度にすべての画像を移動しているようです。

HTMLファイル：

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="demolayout.css"> 
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 

<style> 
</style> 

</head> 
<body > 

<div class="container"> 
<div id="slider"> 
<ul class="slides" > 
     <li class="slide"><img src="5.jpg" alt="Chania"></li> 
     <li class="slide"><img src="5.jpg" alt="Chania"></li> 
     <li class="slide"><a href="#"><img src="4.jpg" alt="Chania"></a></li> 
     <li class="slide"><a href="#"><img src="4.jpg" alt="Chania"></a></li> 
     <li class="slide"><a href="#"><img src="4.jpg" alt="Chania"></a></li> 
     <li class="slide"><a href="#"><img src="4.jpg" alt="Chania"></a></li> 
    </ul> 
    </div> 
    </div> 
    <script src="demo.js"></script> 


</body>

.CSSファイル：

#slider { 
    width:100%; 
    height:400px; 
    overflow:hidden; 
    } 

#slider .slides{ 

    width:6000px; 
    height:400px; 
    margin: 0; 
    padding:0; 

} 

#slider1 .slide{ 
    float: left; 
    list-style-type:none; 
    width:240px; 
    height:400px; 
}

.jsファイル：

$("#slider .slides").animate({'margin-left':'-=650px'},1000)

Jsfiddleリンク：https://jsfiddle.net/q3c21f7q/1/

出典

2016-04-03 YADAV

jsfiddleを投稿してください。 – geeksal

がjsfiddleリンクを追加しました。 – YADAV

はあなたがjQueryのを追加するのを忘れあなたのJSフィドル

スライドをインターバル時間で表示できる機能を追加しました。あなたのjsファイルで

See this fiddle

setInterval(function() { 
    var nextItem = $(".slide.active").fadeOut().removeClass('active').next('.slide'); 

    if (nextItem.length === 0) { 
     nextItem = $('.slide').first(); 
    } 

    nextItem.addClass('active ').fadeIn(); 
}, 2000);

出典

2016-04-03 11:47:45

Vincentに感謝します。しかし私の懸念は、すべての画像が1つではなく左に動いている理由です。私はグーグルでイメージスライダーを作成するマルチプレイの方法を見つけることができますが、私は自分のコードに何が間違っているかにもっと興味があります。 – YADAV

セレクタが大きすぎて最初のセレクタを選択できないためです。次のように変更することができます： '$（"＃スライダ.slides li：first-child "）'最初のものだけを選択します。これを見てください：https://jsfiddle.net/q3c21f7q/8/ –

コードがロードされたとき、あなたのコードは、一度だけ左にスライダー750pxに移動します。

スライドのコンテナではありません左各2秒にあなたのスライダーを移動するためにsetIntervalを使用し、その後

li.slide { display: inline; }

：
は水平一つとして、あなたのリストを設定します。例えば：あなたはまだ戻ってすべての画像が表示されている第一の位置に来る方法を見つける必要があり
```
setInterval(rotate, 2000); 

function rotate() { 
    $("#slider .slides").animate({ 
    'margin-left': '-=750px' 
    }, 1000); 
} 
```

しかし。

スライダーを作成するには、私は少し異なるアプローチを示唆している：、最初

を（ここでは、あなたのul）すべてのスライドを非表示にします。
時間
X秒ごとに1枚のスライドが表示されますこれは、最初に空の、特別なdivを持っている：あなたの終わりにそれをカットして貼り付け、divはすでにスライドが含まれている場合
1. をul（jQueryを使って簡単に）
2. あなたulの最初のslideを取り、あなたのdiv

に挿入

もう一つの方法は、@ VincentGが示唆するように、.activeクラスを使用することです。

出典

2016-04-03 13:05:56 Derlin

Jquery：画像スライダーの最上部の画像のみを表示

答えて

関連する問題