سترى أي صفحة ويب تفتحها بشكل أساسي صورًا سلسًا للتمرير أو carousel ، مثل Taobao و 360 موقعًا رسميًا على الويب
من خلال مراقبة صور carousel هذه ، يمكنك أن تجد أنه يمكن تبديل الصور ذهابًا وإيابًا ، فكيف تفعل ذلك؟
هناك طريقتان رئيسيتان لتحقيق التمرير الكاروسيل أو السلس. أحدهما هو عرض أو إخفاء الصورة عن طريق تغيير ضوء وظلام الصورة ، أي الصور الشفافة ، والآخر هو عرض الصورة في المنطقة المرئية من خلال إطار متحرك. ستقوم كلتا الطريقتين باستخدام نفس الشيء ، أي المؤقت.
هناك نوعان من أجهزة ضبط الوقت في JavaScript ، 1.SetInterval () ؛ 2.SetTimeOut () ؛ هناك أيضًا طريقتان لإغلاق الموقتات ، ClearInterval () و ClearTimeOut (). الفرق بين الموقرين هو أنه يمكن تنفيذ الأول عدة مرات ، في حين يمكن تنفيذ الأخير مرة واحدة فقط.
هذه المرة سأتحدث فقط عن التمرير السلس ، والمقال التالي يقدم صورة carousel.
الرمز لتنفيذ التمرير البسيط السلس هو كما يلي:
/*الكود الكامل* /<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8" /> <style> div {الموضع: النسبية ؛ العرض: 630px ؛ الارتفاع: 220px ؛ الحدود: Solid 2px ؛ Black ؛ Overflow: Hidden ؛} ul {position: absolute ؛ top: 10px ؛ left: 0 ؛} img {width: 200px ؛ leight: 200px ؛ float: left ؛ margin-right: 10px ؛ الحدود: 2px صلبة أصفر ؛} li {style-style: none ؛ margin: 0 ؛ padding: 0 ؛} ul {margin: 0 ؛ padding: 0 ؛} </style> <script> window.onload = function () {var oul = document.getElementById ( oinput = document.getElementsByTagName ("Input") [0] ؛ oul.innerhtml+= oul.innerhtml ؛ oul.style.width = ali.length*ali [0] .offsetWidth+"px" ؛ var timer = null ؛ setInterval (function () {oul.style.left = oul.offsetleft-8+"px" ؛ if (oul.offsetleft <-oul.offsetwidth/2) {oul.style.left = "0px" ؛ id = "main"> <li> <img src = "../ img/1.jpg"> </li> <li> <img src = "../ img/2.jpg"> </li> <li> <img src = "../ img/2.jpg src = "../ img/3.jpg"> </li> <li> <img src = "../ img/4.jpg"> </li> <li> <img src = "../ img/9.jpg"> </li> </ul> </liv> </div> </body> </html>/---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------/
تخطيط التمرير السلس بسيط نسبيًا. يوضح ما يلي بشكل رئيسي محتوى JS:
أولاً ، احصل على UL و LI على التوالي ، ثم نسخ المحتوى في UL ، وقم بتعديل عرض UL من خلال JS بشكل ديناميكي (إذا كنت ترغب في التمرير لأعلى ولأسفل بسلاسة ، وتعديل عرضه) ، وأخيراً تشغيل المؤقت. في الكود ، ينتقل UL 8 بكسل إلى اليسار كل 30 ميكروثانية ، وعندما يكون الهامش الأيسر المرئي من UL أقل من نصف الطول الإجمالي لـ UL ، يصبح 0. نظرًا لأن الكمبيوتر يعمل بسرعة كبيرة ، فمن المستحيل تقريبًا أن يشعر هذا التغيير. كل ما نراه هو أن الصورة تتحرك باستمرار إلى حركة اليسار التي لا نهاية لها.
ما سبق هو رمز JS Scrolling Scrolling الذي قدمه لك من قبل المحرر. آمل أن يكون ذلك مفيدًا للجميع!