رمز التنفيذ البسيط للتمرير السلس (الموصى به)

مبدأ:

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> </viv>

CSS:

 * {margin: 0 ؛ padding: 0 ؛} #box {width: 480px ؛ الارتفاع: 110 بكسل ؛ الحدود: 1 بكسل صلب أحمر. الهامش: 100px Auto ؛ الفائض: مخفي. الموقف: قريب } #box ul {position: absolute ؛ اليسار: 0 ؛ TOP: 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.getElementSbyTagName ('a') ؛ var ispeed = 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 ؛ } ؛ الدالة fnmove () {if (oul.offSetLeft <-oul.offsetWidth/2) {// الرقم السلبي هو أن اليسار UL هو رقم سالب oul.style.left = 0 ؛ } آخر إذا (oul.offsetleft> 0) {oul.style.left = -oul.offsetWidth/2+'px' ؛ } oul.style.left = oul.offsetleft+isPeed+'px' ؛ // ينتقل UL بأكمله إلى اليمين} ؛ var timer = null ؛ ClearInterval (مؤقت) ؛ Timer = setInterval (fnmove ، 30) ؛ oul.onmouseover = function () {clearinterval (timer) ؛ } ؛ oul.onmouseout = function () {timer = setInterval (fnmove ، 30) ؛ // تنفيذ هذا الموقت عند نقل الماوس بعيدًا} ؛ } ؛ </script>

إذا كان هناك أي أخطاء ، يرجى تصحيحها.

إن رمز التنفيذ البسيط المذكور أعلاه (الموصى به) هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.