فكرة:
مجموعة من الصور تتحكم في شريط المتداول الخاص بها ، وفي هذا الوقت ، نسخ هذه المجموعة من الصور وإضافتها إلى مجموعة الصور الأصلية ، هناك الآن مجموعتان من الصور. يمكنك أن تتخيل أن الشريط المتداول يستمر الآن هذه المرة ، يمكنك أن تشعر بالتمرير السلس.
نسخ رمز رمز على النحو التالي:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" /> />
<Title> JS Pictures Rolling Left </itlem>
<type type = "text/css">
IMG {
الحدود: لا شيء ؛
}
</style>
</head>
<body>
<div id = "demo" style = "overflow: Hidden ؛ Width: 500px ؛">
أقل
<tr>
<td id = "demo1" value = "top" bgcolor = "ffffff">
<!- اهتمام خاص ، يجب أن يكون العرض الإجمالي للصورة التالية أكبر من عرض العرض التوضيحي المذكور أعلاه. ، وإلا سيكون هناك بعض المشاكل! ->
<table cellspacing = "0" cellpadding = "0">
<tr align = "center">
<td> <a href = "#" target = "_lank"> <img src = "images/1.jpg"> </a> </td>
<td> <a href = "#" target = "_lank"> <img src = "images/2.jpg"> </a> </td>
<td> <a href = "#" target = "_ blank"> <img src = "images/3.jpg"> </a> </td>
<td> <a href = "#" target = "_ blank"> <img src = "images/4.jpg"> </a> </td>
<td> <a href = "#" target = "_lank"> <img src = "images/5.jpg"> </a> </td>
</r>
</table>
</td>
<td id = "demo2" value = "top">
</td>
</r>
</table>
</div>
<div id = "msg"> </div>
<script type = "text/javaScript" src = "jquery.js"> </script>
<script type = "text/javaScript">
// 0: السرعة الثابتة
varulaed = 30 ؛
// 1: الحصول على العنصر التجريبي Demo1 Demo2
var demo = $ ("#demo") ؛
var demo1 = $ ("#demo1") ؛
var demo2 = $ ("#demo2") ؛
// 2: Copy Demo1-> Demo2
var cont = $ ("#demo1").
$ ("#demo2").
// 3: إنشاء طريقة لتنفيذ الوقت
وظيفة مرحبا () {
var left = $ ("#demo").
if (left> = $ ("#demo1"). width ()) {
اليسار = 0 ؛
} آخر {
اليسار ++ ؛
}
$ ("#demo").
setTimeout ("Hello ()" ، السرعة) ؛
}
مرحبًا ()؛
// Move Demo.Scrollleft () ؛
</script>
</body>
</html>