1. نظرة عامة
لا يمكن لتمرير الصور في حلقة إضافة تأثيرات ديناميكية إلى صفحة الويب فحسب ، بل يمكن أيضًا حفظ مساحة الصفحة وضمان عرض المزيد من الصور على صفحات محدودة.
2. النقاط الفنية
يتم استخدام الطريقة الرئيسية لتحقيق تأثير تمرير الحلقة للصورة. تنسيق بناء الجملة لطريقة setTimeOut () هو كما يلي:
setTimeout (وظيفة ، ميلي ثانية ، [الحجج])
وصف المعلمة:
أ. الوظيفة: اسم وظيفة JavaScript المخصصة ليتم استدعاؤها.
ب. ميلي ثانية: اضبط وقت المهلة بالميلي ثانية.
الوظيفة: بعد انتهاء الوقت المهلة ، تسمى الوظيفة. يمكن مسح هذه القيمة مع وظيفة cleartimeout ().
3. تنفيذ محدد
(1) أضف علامة <div> مع عرض سمة المعرف في الموضع المناسب للصفحة ، وأضف جدولًا وصورة يتم عرضها في العلامة. رمز المفتاح كما يلي:
<div id = "demo" style = "overflow: hidden ؛ width: 455px ؛ الارتفاع: 166px ؛"> <table cellpacing = "0" cellpadding = "0" align = "center"> <٪ لـ (int i = 1 ؛ i <8 ؛ i ++) {٪> <td> <img src = "images/<٪ = i ٪>.(2) اكتب وظيفة JavaScript المخصصة MOVE () لتحقيق تأثير التمرير حلقة الصورة دون انقطاع. كلما زادت قيمة السرعة ، كلما كانت الصور أسرع. الرمز المحدد كما يلي:
<script language = "javaScript"> var speed = 30 ؛ // قم بتعيين وقت الفاصل marquepic2.innerhtml = marquepic1.innerhtml ؛ var demo = document.getElementById ("demo") ؛ // الحصول على وظيفة الكائن التجريبي MARQUEE (n) {// طريقة تحقيق حلقة الصورة إذا (marquepic1.offsetwidth-demo.scrollleft <= 0) {demo.scrollleft = 0 ؛ } آخر {demo.scrollleft = demo.scrollleft+n ؛}} var mymar = setInterval ("marquee (5)" ، speed) ؛ demo.onmouseover = function () {// stop scrolling clearinterval (mymar) ؛} demo.onmouseout = function () mymar = setInterval ("Marquee (5)" ، السرعة) ؛} </script>ما سبق هو المعرفة ذات الصلة برمز JavaScript الذي قدمه لك المحرر لإدراك تأثير التمرير حلقة الصورة. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!