เอฟเฟกต์การเลื่อนที่ไร้รอยต่อของ JS สามารถดูได้ในเกือบทุกหน้าเว็บ บางตัวอาจเป็นปลั๊กอิน แต่ในความเป็นจริงการใช้จาวาสคริปต์ดั้งเดิมนั้นค่อนข้างง่าย
สิ่งสำคัญคือการใช้ความรู้ตำแหน่ง JS
1.innerhtml: ตั้งค่าหรือรับแท็ก HTML ขององค์ประกอบ
2. Scrollleft: ตั้งค่าหรือรับระยะห่างระหว่างขอบเขตด้านซ้ายของวัตถุและปลายด้านซ้ายสุดของเนื้อหาที่มองเห็นได้ในปัจจุบันในหน้าต่าง
3.OffsetWidth: ตั้งค่าหรือรับความกว้างของฉลากที่ระบุ
4.SetInterval (): ตั้งค่าวิธีการเริ่มต้นเป็นประจำ
5.ClearInterval (); ล้างตัวจับเวลา
ภาพการทำซ้ำ:
แอบ: สาธิต
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> JavaScript Scroll Production </title>
</head>
<body>
<style>
/*Conment*/
-
มาร์จิ้น: 0;
Padding: 0;
-
IMG {Max-Width: 100%;}
.คอนเทนเนอร์{
ความกว้างสูงสุด: 620px;
มาร์จิ้น: 0 อัตโนมัติ;
Padding-Top: 50px;
-
.Text-Center {text-allign: center;}
. ลิสต์อินไลน์ li {
แสดง: Inline-Block;
-
.hide {display: none;}
ชม. {
มาร์จิ้น: 20px 0;
-
.TAG {
พื้นหลังสี: #CCC;
Padding: 5px 0;
-
.tag li {
Padding: 0 10px;
ชายแดนซ้าย: 1px Solid #FFF;
เคอร์เซอร์: ตัวชี้;
-
.tag li: ลูกคนแรก {
ชายแดนซ้าย: โปร่งใส;
-
.tag li.active {
พื้นหลังสี: #DDD;
-
.Scroll {
ตำแหน่ง: ญาติ;
Padding: 10px;
มาร์จิ้น-ก้น: 20px;
พื้นหลังสี: #DDD;
-
.ห่อ{
ล้น: ซ่อน;
-
.เนื้อหา{
Min-Width: 3000px;
ความสูง: 200px;
-
.Content ul {
ลอย: ซ้าย;
-
.Content ul li {
แสดง: Inline-Block;
ความกว้างสูงสุด: 200px;
-
#prev,#ถัดไป {
ความกว้าง: 50px;
ความสูง: 50px;
ระยะขอบด้านบน: -25px;
พื้นหลังสี: #CCC;
ระดับความสูง: 50px;
TEXT-ALIGN: CENTER;
เคอร์เซอร์: ตัวชี้;
-
#prev {
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 0;
ด้านบน: 50%;
แนวชายแดน: 0 25px 25px 0;
-
#ต่อไป{
ตำแหน่ง: สัมบูรณ์;
ขวา: 0;
ด้านบน: 50%;
แนวชายแดน: 25px 0 0 25px;
-
</style>
<div>
<H1> การผลิตการเลื่อนรูปภาพ </h1>
<Hr>
<div>
<div id = "wrap">
<div id = "เนื้อหา">
<ul id = "list1">
<li> <img src = "freelance.gif"> </li>
<li> <img src = "button.gif"> </li>
<li> <img src = "load.gif"> </li>
<li> <img src = "straw.gif"> </li>
</ul>
<ul id = "list2">
</ul>
</div>
</div>
<div id = "prev">
ก่อน
</div>
<div id = "next">
ต่อไป
</div>
</div>
</div>
<script>
var wrap = document.getElementById ('wrap');
var list1 = document.getElementById ('list1');
var list2 = document.getElementById ('list2');
var prev = document.getElementById ('prev');
var next = document.getElementById ('ถัดไป');
// สร้างสำเนาของรายการเนื้อหา
list2.innerhtml = list1.innerhtml;
// เปลี่ยนเป็นซ้าย
ฟังก์ชัน Scroll () {
if (wrap.scrollleft> = list2.offsetWidth) {
wrap.scrollleft = 0;
-
อื่น{
wrap.scrollleft ++;
-
-
timer = setInterval (scroll, 1);
// ใช้ ClearInterval () สำหรับการพักเมาส์
wrap.onMouseOver = function () {
ClearInterval (ตัวจับเวลา);
-
wrap.onmouseout = function () {
timer = setInterval (scroll, 1);
-
// เร่งไปทางซ้าย
ฟังก์ชั่น scroll_l () {
if (wrap.scrollleft> = list2.offsetWidth) {
wrap.scrollleft = 0;
-
อื่น{
wrap.scrollleft ++;
-
-
// เลื่อนไปทางขวา
ฟังก์ชั่น scroll_r () {
if (wrap.scrollleft <= 0) {
wrap.scrollleft+= list2.offsetWidth;
-
อื่น{
Wrap.scrollleft--;
-
-
prev.onclick = function () {
ClearInterval (ตัวจับเวลา);
เปลี่ยน (0)
-
next.onclick = function () {
ClearInterval (ตัวจับเวลา);
เปลี่ยน (1)
-
การเปลี่ยนแปลงฟังก์ชั่น (r) {
ถ้า (r == 0) {
timer = setInterval (scroll_l, 60);
wrap.onmouseout = function () {
timer = setInterval (scroll_l, 60);
-
-
ถ้า (r == 1) {
timer = setInterval (scroll_r, 60);
wrap.onmouseout = function () {
timer = setInterval (scroll_r, 60);
-
-
-
</script>
</body>
รหัสที่กระชับและใช้งานได้จริงโปรดทำให้มันสวยงามตามความต้องการของโครงการของคุณ