アイデア:
一連の写真は、ローリングのためにローリングバーを制御し、この時点でこの一連の写真をコピーして元の写真グループに追加すると、現在、2セットの写真があります。ローリングバーは今、写真の最後の写真が展開され、写真の最初の写真が消えています今回は、シームレスなスクロールを感じることができます。
次のようにコードコードをコピーします。
<
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<メタhttp-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<title> js pictures lolling左</title>
<style type = "text/css">
img {
国境:なし;
}
</style>
</head>
<body>
<div id = "demo" style = "overflow:hidden; width:500px;">
<テーブルボーダー= 0 align = center cellpadding = 1 cellspacing = 1 cellspace = 0>
<tr>
<td id = "demo1" value = "top" bgcolor = "ffffff">
<! - 上記のデモの幅が500pxの場合、次の画像の総幅が上記のデモの幅よりも大きくなければなりません。 、そうでなければいくつかの問題があります! - >
<Table CellSpacing = "0" CellPadding = "0">
<tr align = "center">
<td> <a href = "#"ターゲット= "_lank"> <img src = "images/1.jpg"> </a> </td>
<td> <a href = "#"ターゲット= "_lank"> <img src = "images/2.jpg"> </a> </td>
<td> <a href = "#"ターゲット= "_ blank"> <img src = "mages/3.jpg"> </a> </td>
<td> <a href = "#"ターゲット= "_ blank"> <img src = "images/4.jpg"> </a> </td>
<td> <a href = "#"ターゲット= "_lank"> <img src = "images/5.jpg"> </a> </td>
</tr>
</table>
</td>
<td id = "demo2" value = "top">
</td>
</tr>
</table>
</div>
<div id = "msg"> </div>
<script type = "text/javascript" src = "jquery.js"> </scrip>
<script type = "text/javascript">
// 0:固定速度
varuled = 30;
// 1:Element Demo Demo1 Demo2を取得します
var demo = $( "#demo");
var demo1 = $( "#demo1");
var demo2 = $( "#demo2");
// 2:demo1-> demo2をコピーします
var cont = $( "#demo1")。
$( "#demo2")。
// 3:時間を実行する方法を作成します
function hello(){
var left = $( "#demo")。
if(left> = $( "#demo1")。width()){
左= 0;
} それ以外 {
左++;
}
$( "#demo")。
setimeout( "hello()"、speed);
}
こんにちは ();
// demo.scrollleft()を移動します。
</script>
</body>
</html>