JQuery 循环幻灯片重叠
当我使用 JQuery 制作自定义图片幻灯片时，图片显示在定义的区域/div 之外。我希望 div 标签中的当前图片向下滑出 div 标签，而新图片从右侧滑入。我希望所有操作都发生在 div 标签内。就像 malsup.com (http://jquery.malsup.com/cycle/adv.html) 中的示例“s4”一样。我做了这个例子来说明问题：
html的头部：
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$('.slideshow01').cycle({
fx: 'custom',
sync: 0,
cssBefore: {
top: 0,
left: 250,
display: 'block'
},
animIn: {
left: 0
},
animOut: {
top: 188
},
delay: -1000,
pause: 1
});
</script>
html的主体部分：
<div style="width:250px; height:188px; border:solid 10px #ffffff; ">
<div class="slideshow01">
<img src="img/001.gif" />
<img src="img/002.gif" />
<img src="img/003.gif" />
<img src="img/004.gif" />
<img src="img/005.gif" />
<img src="img/006.gif" />
<img src="img/007.gif" />
</div>
</div>
When I use JQuery to make a custom picture slideshow the pictures are shown outside the defined area/div. I want the current picture in the div-tag to slide down and out of div-tag and the new picture to slide in from the right. I want all the action to happen inside the div-tag. Just like the example "s4" from malsup.com (http://jquery.malsup.com/cycle/adv.html). I have made this example to show the problem:
Head-part of the html:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$('.slideshow01').cycle({
fx: 'custom',
sync: 0,
cssBefore: {
top: 0,
left: 250,
display: 'block'
},
animIn: {
left: 0
},
animOut: {
top: 188
},
delay: -1000,
pause: 1
});
</script>
Body-part of the html:
<div style="width:250px; height:188px; border:solid 10px #ffffff; ">
<div class="slideshow01">
<img src="img/001.gif" />
<img src="img/002.gif" />
<img src="img/003.gif" />
<img src="img/004.gif" />
<img src="img/005.gif" />
<img src="img/006.gif" />
<img src="img/007.gif" />
</div>
</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您需要将溢出设置为在父元素上隐藏。例如：
使用内联样式也不是最佳实践，请查看外部样式表:)
You need to set the overflow to be hidden on the parent element. Eg:
Using inline styles isn't the best of practices either, have a look into external stylesheets :)