ความคิด:
ชุดรูปภาพควบคุมแถบกลิ้งสำหรับการกลิ้งและในเวลานี้การคัดลอกชุดรูปภาพนี้และเพิ่มลงในกลุ่มรูปภาพต้นฉบับตอนนี้มีรูปภาพสองชุด คุณสามารถจินตนาการได้ว่าแถบกลิ้งยังคงหมุนไปในตอนนี้ คราวนี้คุณสามารถรู้สึกได้อย่างราบรื่น
คัดลอกรหัสรหัสดังนี้:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<title> js รูปภาพกลิ้งไปทางซ้าย </title>
<style type = "text/css">
img {
ชายแดน: ไม่มี;
-
</style>
</head>
<body>
<div id = "demo" style = "overflow: hidden; width: 500px;">
<table border = 0 allign = center cellpadding = 1 cellspacing = 1 cellspace = 0>
<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>
</tr>
</table>
</td>
<td id = "demo2" value = "top">
</td>
</tr>
</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: คัดลอก demo1-> demo2
var cont = $ ("#demo1")
$ ("#demo2")
// 3: สร้างวิธีการเพื่อดำเนินการตามเวลา
ฟังก์ชั่นสวัสดี () {
var left = $ ("#DEMO")
ถ้า (ซ้าย> = $ ("#demo1"). width ()) {
ซ้าย = 0;
} อื่น {
ซ้าย ++;
-
$ ("#DEMO")
settimeout ("hello ()", ความเร็ว);
-
สวัสดี ();
// ย้าย demo.scrollleft ();
</script>
</body>
</html>