如何使用 jquery 从左到右或从右到左滑动图像？
我正在尝试为我的网页构建一个简单的图像滑块，这是我使用 jquery、css 编写的代码 -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
*{
margin:0; padding:0;
}
#container{
position:absolute; left:100px; top:100px;
width:102px;height:102px;
border:1px solid red;
overflow:hidden; display:inline;
}
#container img{float:left;}
</style>
<script type="text/javascript">
$(document).ready(function(){
setInterval(slideImages, 5000);
function slideImages(){
$('#container img:first-child').clone().appendTo('#container');
$('#container img:first-child').remove();
}
});
</script>
</head>
<body>
<div id="container">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
</div>
</body>
</html>
当代码工作并显示图像时，我想通过以下方式添加更多效果：新图像滑入“容器”窗格。就像从右向左滑动，然后在那里停留一段时间，然后下一张图像再次从右向左滑动来取代现有的图像。
请指导我如何获得从右到左滑动的效果。我知道我可以使用 jquery 向上/向下滑动..但是如何做到 lr 或 rl 呢？
谢谢！
I'm trying to build a simple image slider for my webpage, and here's the code that I have come up with using jquery, css -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
*{
margin:0; padding:0;
}
#container{
position:absolute; left:100px; top:100px;
width:102px;height:102px;
border:1px solid red;
overflow:hidden; display:inline;
}
#container img{float:left;}
</style>
<script type="text/javascript">
$(document).ready(function(){
setInterval(slideImages, 5000);
function slideImages(){
$('#container img:first-child').clone().appendTo('#container');
$('#container img:first-child').remove();
}
});
</script>
</head>
<body>
<div id="container">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
</div>
</body>
</html>
While the code works and displays the images, I would like to add some more effects to it by having the new image slide into the 'container' pane. Like sliding from right direction to the left, and then staying there for sometime and then the next image replaces the existin one by again sliding from right to left.
Please guide me as to how to get the sliding r-to-l effect. I know i can slide up/down using jquery.. but how to do it l-r or r-l?
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
单击此处查看我敲出的示例。您可以轻松更改代码以按时间间隔运行：
JS
CSS
HTML
Click here to view example I knocked up. You can easily change the code to work on a timed interval:
JS
CSS
HTML
Slide适合您吗？Will
Slideworks for you?