为什么并非所有图像都显示在此滑块中？ [英] Why are not all images showing up in this slider?
问题描述
这是我的代码
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var startSlider = function() {
var startSlide = $(".slider li:first");
var nextSlide = $(".active").next("li");
$(".active").removeClass();
if(nextSlide.html() == null) {
nextSlide = startSlide;
}
nextSlide.addClass("active");
setTimeout(startSlider, 1000);
};
setTimeout(startSlider, 1000);
});
</script>
<style>
.active{
display:none;
}
</style>
</head>
<body>
<ul class="slider" style="list-style:none;">
<li><div class="active" style="background:#F00;height:100px;width:100px;margin:6px; position: fixed; top: 100px;"></div></li>
<li><div style="background:#0F0;height:100px;width:100px;margin:6px; position: fixed; top:100px;"></div></li>
<li><div style="background:#00F;height:100px;width:100px;margin:6px; position: fixed; top:100px;"></li>
<li><div style="background:#000;height:100px;width:100px;margin:6px; position: fixed; top: 100px;"></div></li>
</ul>
</body>
</html>
当我运行这个代码只有蓝色和黑色divs再次显示。原因是什么？我试图把活动类放在不同的位置，但它没有帮助。我删除了错误建议在答案它不是在原来的代码，只显示在这里。
When I run this code only blue and black divs show up again and again.What can be the posible reason for that? I tried to put active class at different position but it did not help.I removed the typo suggested in answer it was not in the original code and showed up only here.
推荐答案
您的脚本将从第一个div开始，将 class =active设置为四个div之一。
由于 active CSS类
Your script will set class="active" to one of the four divs at a time starting with the first div.
Since this is the definition of active CSS class
<style>
.active{
display:none;
}
</style>
当前div有 class =active将消失，但其他三个不会，并且它们被放置在完全相同的位置，因此只能看到更暗的颜色，在这种情况下是蓝色和黑色。
The current div that have class="active" will disappear but the other three won't, and they're placed in the exact same position so only the darker colors can be seen, which are blue and black in this case.
我建议使用两个CSS类，如下所示：
I would suggest using two CSS classes as follows
<style>
.active{
display:block;
}
.inactive{
display:none;
}
</style>
并更改脚本以使一个div具有 class =active，其余的都有 class =inactive，这意味着活动 无效 div将会消失。
and changing your script to make one div have class="active" and the rest have class="inactive" at a time, meaning the active div will appear and the inactive divs will disappear.
<script>
$(document).ready(function() {
var startSlider = function() {
var startSlide = $(".slider li:first");
var nextSlide = $(".active").next("li");
// remove css class from all divs
$(".active").removeClass();
$(".inactive").removeClass();
if(nextSlide.html() == null)
{nextSlide = startSlide;}
// set nextSlide css class to active
nextSlide.addClass("active");
// set the rest of the divs css class to inactive
nextSlide.siblings().addClass("inactive");
setTimeout(startSlider, 1000);
};
setTimeout(startSlider, 1000);
});
</script>
以下是完成上述更改后的完整代码。
Here's the complete code after making the changes above.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var startSlider = function() {
var startSlide = $(".slider li:first");
var nextSlide = $(".active").next("li");
// remove css class from all divs
$(".active").removeClass();
$(".inactive").removeClass();
if(nextSlide.html() == null)
{nextSlide = startSlide;}
// set nextSlide css class to active
nextSlide.addClass("active");
// set the rest of the divs css class to inactive
nextSlide.siblings().addClass("inactive");
setTimeout(startSlider, 1000);
};
setTimeout(startSlider, 1000);
});
</script>
<style>
.active{
display:block;
}
.inactive{
display:none;
}
</style>
</head>
<body>
<ul class="slider" style="list-style:none;">
<li><div class="active" style="background:#F00;height:100px;width:100px;margin:6px; position: fixed; top: 100px;"></div></li>
<li><div class="inactive" style="background:#0F0;height:100px;width:100px;margin:6px; position: fixed; top:100px;"></div></li>
<li><div class="inactive" style="background:#00F;height:100px;width:100px;margin:6px; position: fixed; top:100px;"></div></li>
<li><div class="inactive" style="background:#000;height:100px;width:100px;margin:6px; position: fixed; top: 100px;"></div></li>
</ul>
</body>
</html>
这里是工作jsfiddle： http://jsfiddle.net/k8qod5g0/
Here's the working jsfiddle: http://jsfiddle.net/k8qod5g0/
这篇关于为什么并非所有图像都显示在此滑块中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
