Jquery：只顯示圖像滑塊中的最頂層圖像

我正在嘗試使用HTML，CSS和Jquery構建基本的圖像滑塊。在向左移動（750px）時，它只移動最上面的圖像，而不顯示剩餘的圖像。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小提琴。

我添加了一個函數，可以顯示您的幻燈片與間隔時間。

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

謝謝文森特。但我擔心的是爲什麼所有圖像都是向左移動而不是一個。我可以在Google中找到多重播放方式來創建圖片滑塊，但我更感興趣的是我的代碼出了什麼問題。 – YADAV

這是因爲您的選擇器太大而不能選擇第一個。你可以通過這個改變它：'$（「＃slider .slides li：first-child」）'只選擇第一個。看到這個小提琴：https：//jsfiddle.net/q3c21f7q/8/ –

在你的js文件，你的代碼將滑塊750px向左移動只有一次，當代碼被加載。滑塊是幻燈片的容器，所以它顯然將所有幻燈片......

不知道你打算如何創建工作滑塊出這個代碼，但這裏有一些提示：

設置您的列表作爲橫一用：
```
li.slide { display: inline; } 
```

然後，使用setInterval您滑塊向左移動各2秒。例如：

setInterval(rotate, 2000); 

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

但是你還是要找到一種方式來回到第一位置時，所有的圖片都被顯示。

要創建一個滑塊，我建議稍微不同的方法：

首先，隱藏所有幻燈片（在這裏，你ul）。
有一個特殊的div，空起初，它會顯示一個幻燈片同時
每X秒：
1. 如果div已經包含了一個幻燈片，就把它和它在結束粘貼ul（使用jQuery容易）
2. 把你ul的第一slide並在div

插入

另一種方法是使用.active類，就像@VincentG建議的那樣。

來源

2016-04-03 13:05:56 Derlin

Jquery：只顯示圖像滑塊中的最頂層圖像

回答

相關問題