รหัสเอฟเฟกต์การเลื่อนรูปภาพ JS ที่ราบรื่นมาก, วนรอบที่ราบรื่น, ความเร็วที่ปรับแต่งได้, หยุดเมื่อเมาส์ลอยอยู่ คุณลักษณะของมันคือการแยก JS และที่อยู่รูปภาพ
การคัดลอกรหัสมีดังนี้:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> ภาพเลื่อน </title>
</head>
<body>
<style type = "text/css">
-
#demo {
ความเป็นมา: #FFF;
ล้น: ซ่อน;
เส้นขอบ: 1px ประ #CCC;
ความกว้าง: 500px;
-
#demo img {
ชายแดน: 3px Solid #F2F2F2;
-
#Indemo {
ลอย: ซ้าย;
ความกว้าง: 800%;
-
#demo1 {
ลอย: ซ้าย;
-
#demo2 {
ลอย: ซ้าย;
-
-
</style>
<div id = "demo">
<div id = "indemo">
<div id = "demo1">
<a href = "#"> <img src = "/jscss/demoimg/wall_s1.jpg"/> </a>
<a href = "#"> <img src = "/jscss/demoimg/wall_s2.jpg"/> </a>
<a href = "#"> <img src = "/jscss/demoimg/wall_s3.jpg"/> </a>
<a href = "#"> <img src = "/jscss/demoimg/wall_s4.jpg"/> </a>
<a href = "#"> <img src = "/jscss/demoimg/wall_s5.jpg"/> </a>
<a href = "#"> <img src = "/jscss/demoimg/wall_s6.jpg"/> </a>
</div>
<div id = "demo2"> </div>
</div>
</div>
<script>
-
var speed = 10;
var tab = document.getElementById ("สาธิต");
var tab1 = document.getElementById ("demo1");
var tab2 = document.getElementById ("demo2");
tab2.innerhtml = tab1.innerhtml;
ฟังก์ชั่น Marquee () {
if (tab2.offsetWidth-tab.scrollleft <= 0)
tab.scrollleft- = tab1.offsetWidth
อื่น{
tab.scrollleft ++;
-
-
var mymar = setInterval (Marquee, ความเร็ว);
tab.onMouseOver = function () {clearInterval (mymar)};
tab.onmouseout = function () {mymar = setInterval (marquee, speed)};
-
</script>
</body>
</html>