[英]How to make this slider work?
我正在尝试发展我的Web编程技能。 现在,我正在尝试制作自动图片滑块。 我正在尝试从网站上申请一个,但不幸的是它不起作用:
$("#home_pic > div:gt(0)").hide();
setInterval(function() {
$('#home_pic > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#home_pic');
}, 3000);
#home_pic img {
width: 100%;
height: 330px;
border-bottom: 3px solid #7C7063;
}
<div id="home_pic">
<div><img src="pic0.png"></div>
<div><img src="pic1.png"></div>
</div> <!--end of home_pic-->
好吧,图片似乎发生了变化,但是却一幅接一幅地出现。 描述问题
DOM准备就绪后,您需要应用JavaScript。
$(document).ready(function() {
setInterval(function() {
$('#home_pic > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#home_pic');
}, 3000);
});
看到这个: 小提琴
看看这个小提琴 。 我已经像这样更改了您的代码:
JS
$("#home_pic > img:gt(0)").hide();
setInterval(function() {
$('#home_pic > img:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#home_pic');
}, 3000);
HTML
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="home_pic">
<img id="1" src="http://image.sportsmansguide.com/adimgs/l/1/145827_ts.jpg">
<img src="http://images.clipartpanda.com/net-clipart-FISHING_NET.jpg">
</div> <!--end of home_pic-->
CSS
#home_pic img {
position:absolute;/* this is for the images to be overlayered for info search about position:absolute */
width: 50px;
height: 50px;
border: 3px solid #7C7063;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.