مبدأ:
1. امنح UL موقعًا مطلقًا لجعله منفصلًا عن دفق المستند ، تم تعيينه إلى 0
2. اضبط مؤقتًا لجعل وظيفة "Moving" تنفيذ كل 30 ميلي ثانية (معلمات متغيرة)
3. لأن طول UL سيكون "تشغيل" ، محتوى UL ، أي ، IMG ، يمكن مضاعفة.
oul.innerhtml += oul.innerhtml ؛
4. في هذا الوقت ، نظرًا لزيادة محتوى UL ، سيزداد عرضه أيضًا ، وقد يتغير عدد الصور المعروضة أو غير مؤكد وفقًا للمشروع الفعلي.
oul.style.width = oli.length*oli [0] .offSetWidth+'px' ؛
5. إضافة رمز إلى وظيفة "نقل".
5.1 في هذا الوقت ، ينتقل UL إلى اليمين. عندما تعرض UL's OffseStleft> 0 ، اسحب UL إلى اليسار "نصف عرض UL" ، أي ، تمكين UL من الانتقال إلى اليمين دون الحد.
if (oul.offsetleft> 0) {oul.style.left = -oul.offsetWidth/2+'px' ؛}5.2 عندما ينتقل UL إلى اليسار ويعمل تقاطعه على نصف عرض UL ، اسحب UL بالكامل إلى اليسار الأولي: 0 ؛
if (oul.offsetLeft <-oul.offsetWidth/2) {oul.style.left = 0 ؛ }على الرمز:
HTML:
<div id = "box"> <ul> <li> <a href = "#"> <img src = "1.jpg"/> </a> </li> <li> <a href = "#"> <img src = "2.jpg"/> </a> <li> <a href = "#"#" /> </a> </li> <li> <a href = "#"> <img src = "3.jpg"/> </a> </li> <li> <a href = "#"
CSS:
* {margin: 0 ؛ padding: 0 ؛}#box {width: 480px ؛ الارتفاع: 110 بكسل ؛ الحدود: 1 بكسل صلب أحمر. الهامش: 100px Auto ؛ الفائض: مخفي. الموقف: قريب } #box ul {position: absolute ؛ اليسار: 0 ؛ أعلى: 5px ؛}#box ul li {style style: none ؛ تعويم: اليسار. العرض: 100px ؛ الارتفاع: 100px ؛ حشو اليسار: 16 بكسل ؛ } #box ul li img {width: 100px ؛ الارتفاع: 100px ؛}JS:
<script> window.onload = function () {var odiv = document.getElementById ('div1') ؛ var oul = odiv.getelementsbytagname ('ul') [0] ؛ var oli = oul.getelementsbytagname ('li') ؛ var aa = document.getelementbytagname ('a') ؛ var = 10 ؛ // Let UL لديها سرعة لتحريك oul.innerhtml += oul.innerhtml ؛ oul.style.width = oli.length*oli [0] .offSetWidth+'px' ؛ aa [0] .onclick = function () {isPeed = -10 ؛} ؛ aa [1] .onclick = function () {isPeed = 10 ؛ if (oul.offsetleft> 0) {oul.style.left = -oul.offsetWidth/2+'px' ؛ } oul.style.left = oul.offsetleft+isPeed+'px' ؛ // ينتقل UL بأكمله إلى اليمين} ؛ var timer = null ؛ ClearInterval (timer) ؛ timer = setInterval (fnmove ، 30) ؛ oul.onmouseover = function () {clearinterval (timer) ؛} ؛ oul.onmouseout = function () {timer = setInterval (fnmove ، 30) ؛ // تنفيذ هذا المؤقت عند نقل الماوس بعيدًا} ؛} ؛ </script>ما سبق هو أفكار التمرير والرمز السلس القائم على JS التي شاركها المحرر. آمل أن تساعدك. إذا كان لديك أي أسئلة ، يرجى ترك رسالة لي. سوف يرد المحرر لك في الوقت المناسب. شكرًا جزيلاً على دعمكم لموقع Wulin Network!