我的 slider Html 代码
<div id="slideshow">
<div>
<img src="5658667829_2bb7d42a9c_m.jpg">
</div>
<div>
<img src="5638093881_a791e4f819_m.jpg">
</div>
我的 slider Css 代码
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
我的 slider Jquery 代码
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
这是我的 slider 代码，它不起作用，请帮忙。
最佳答案
它对我有用。 您错过了幻灯片 div 的结束标记。 无论是什么，我的代码都是挚爱
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>slider</title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
<style>
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div id="slideshow">
<div>
<img src="123.jpg">
</div>
<div>
<img src="321.jpg">
</div>
</div>
</body>
</html>
关于javascript - HTML slider 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21900551/