4
私は私のWebページのためのシンプルなイメージスライダーを構築しようとしている、とここで私はjqueryのを使用して出ているコードだ、CSS -jqueryを使用して左から右または左から右に画像をスライドさせるにはどうすればよいですか？
<!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を使って上/下にスライドすることができることを知っています..しかし、それを行う方法 - またはr - l？
ありがとうございます！