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/

请张贴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);

谢谢文森特。但我担心的是为什么所有图像都是向左移动而不是一个。我可以在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建议的那样。

Jquery：只显示图像滑块中的最顶层图像

相关推荐