التأثير: انقل الماوس إلى الصورة وتوقف عن التمرير ، والماوس خارج التمرير تلقائيًا
يمكن ضبط التمرير على الاتجاه الأيسر أو الأيمن
نسخة الكود كما يلي:
<type type = "text/css">
* {
الهامش: 0 ؛
الحشو: 0 ؛
}
#div1 {
الفائض: مخفي.
العرض: 712 بكسل ؛
الارتفاع: 108 بكسل ؛
الهامش: 100px Auto ؛
الموقف: قريب
الخلفية: أحمر.
}
#div1 ul {
الموقف: مطلق ؛
اليسار: 0 ؛
أعلى: 0 ؛
}
#div1 ul li {
تعويم: اليسار.
العرض: 178 بكسل ؛
الارتفاع: 108 بكسل ؛
على غرار القائمة: لا شيء ؛
}
</style>
نسخة الكود كما يلي:
<body>
<a href = "javaScript: ؛"> المشي اليسار </a>
<a href = "javaScript: ؛"> المشي إلى اليمين </a>
<div id = "div1">
<ul>
<li>
<img src = "img/seamless scroll/1.jpg"/>
</li>
<li>
<img src = "img/seamless scroll/2.jpg"/>
</li>
<li>
<img src = "img/seamless scroll/3.jpg"/>
</li>
<li>
<img src = "img/seamless scroll/4.jpg"/>
</li>
</ul>
</div>
</body>
ما سبق هو تصميم بسيط ، والما يلي هو رمز JavaScript الرئيسي
نسخة الكود كما يلي:
<script type = "text/javaScript">
window.onload = function () {
var odiv = document.getElementById ("div1") ؛
var oul = odiv.getElementSbyTagName ('ul') [0] ؛
var ali = oul.getElementsByTagname ('li') ؛
var speed = 2 ؛
oul.innerhtml += oul.innerhtml ؛
oul.style.width = ali [0] .offSetWidth * ali.length + 'px' ؛
وظيفة move () {
if (oul.offsetleft <-oul.offsetwidth / 2) {
oul.style.left = '0' ؛
}
if (oul.offsetleft> 0) {
oul.style.left = -oul.offsetWidth / 2 + 'px' ؛
}
oul.style.left = oul.offsetleft + speed + 'px' ؛
}
var timer = setInterval (Move ، 30) ؛
odiv.onmouseover = function () {
ClearInterval (مؤقت) ؛
} ؛
odiv.onmouseout = function () {
Timer = setInterval (Move ، 30) ؛
} ؛
document.getElementsByTagName ('A') [0] .Onclick = function () {
السرعة = -2 ؛
} ؛
document.getElementsByTagName ('a') [1] .Onclick = function () {
السرعة = 2 ؛
} ؛
}
</script>
اسمحوا لي أن أشرح الفكرة بإيجاز:
أولا ، تعيين UL. هناك 8 صور في total oul.innerhtml += oul.innerhtml ؛
احسب عرض UL للعرض الفعلي لـ Li*8
إخفاء المحتوى الإضافي لاحقًا
ملاحظة: oul.offsetleft سلبي بالتأكيد
لذلك لا تفوت العلامة السلبية عند إصدار حكم
نسخة الكود كما يلي:
if (oul.offsetleft <-oul.offsetwidth / 2) {
oul.style.left = '0' ؛
}
هذا القسم يعني أن الصورة تتمرير في منتصف الطريق ، وسحب الصورة بسرعة. نظرًا لأن البرنامج ينفذ بسرعة كبيرة ، يكاد يكون من المستحيل رؤية التمرير السلس.
أخيرًا ، استخدم السرعة المتغيرة للتحكم في التمرير في الاتجاهات اليمنى واليسرى.
لا ينفذ الرمز أعلاه سوى الوظائف الأساسية ، ويمكن للأصدقاء الاستمرار في تحسينها على هذا الأساس.