تشارك هذه المقالة الكود المحدد لاستخدام JS لإنشاء تأثيرات دائرية على الصفحة الرئيسية للمواقع العامة للرجوع إليها. المحتوى المحدد كما يلي
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> صورة carousel </title> <style> .warp {width: 600px ؛ الارتفاع: 750 بكسل ؛ الموقف: قريب الهامش: 30px Auto 0 ؛ الفائض: مخفي. } #box {width: 600px ؛ الارتفاع: 750 بكسل ؛ الموقف: مطلق ؛ أعلى: 0px ؛ اليسار: 0px ؛ الفائض: مخفي. /*overflow-x: auto ؛*/} #box #con {width: 6000px ؛ الارتفاع: 750 بكسل ؛ الفائض: مخفي. } #con img {float: left ؛ العرض: 600 بكسل ؛ الارتفاع: 750 بكسل ؛ } #btnl {الموضع: absolute ؛ اليسار: 0px ؛ أعلى: 366 بكسل ؛ العرض: 36 بكسل ؛ الارتفاع: 36 بكسل ؛ الخلفية: url (الصور/btnl.png) 0 0 no-repeat ؛ المؤشر: مؤشر. } #btnr {الموضع: absolute ؛ اليمين: 0px ؛ أعلى: 366 بكسل ؛ العرض: 36 بكسل ؛ الارتفاع: 36 بكسل ؛ الخلفية: url (الصور/btnr.png) 0 0 no-repeat ؛ المؤشر: مؤشر. } #num {الموضع: absolute ؛ أسفل: 10 بكسل ؛ اليسار: 148 بكسل ؛ الفائض: مخفي. على غرار القائمة: لا شيء ؛ } #num li {float: left ؛ الهامش: 0 5px ؛ حجم الخط: 16 بكسل ؛ رفع الخط: 25 بكسل ؛ الارتفاع: 25 بكسل ؛ العرض: 25 بكسل ؛ الخلفية: #CCC ؛ محاذاة النص: المركز ؛ المؤشر: مؤشر. } #num li.select {background-color: Green ؛ اللون: أبيض. } </style> </head> <body> <viv> <div id = "box"> <div id = "con"> <img src = "images/meinv1.jpg"> <img src = "images/meinv2 src = "images/meinv5.jpg"> <img src = "images/meinv6.jpg"> </viv> </viv> <div id = "btnl"> </viv> <div id = "btnr"> </viv> <ul id = "num"> 1 </li> <li> 5 </li> <li> 6 </li> </viv> <script> var box = document.getElementById ('box') ؛ var con = document.getElementById ('con') ؛ var imgs = con.getElementsByTagName ('img') ؛ var btnl = document.getElementById ('btnl') ؛ var btnr = document.getElementById ('btnr') ؛ var num = document.getElementById ('num') ؛ var num = document.getElementById ('num') ؛ var num = document.getElementById ('num') ؛ var btnr = document.getElementById ('num') ؛ var num = document.getElementById ('num') ؛ var num = document.getElementById ('num') ؛ var lis = num.getElementsByTagName ('li') ؛ var timer1 = null ، timer2 = null ؛ var imgw = imgs [0] .clientwidth ؛ var x = 0 ؛ دالة imgscroll () {// switch image var start = box.scrollleft ؛ var end = imgw*x ؛ var change = end-start ؛ var minstep = 0 ؛ var maxstep = 30 ؛ var steplength = change/maxstep ؛ ClearInterval (timer2) ؛ timer2 = setInterval (function () {minstep ++ ؛ // console.log (minstep) ؛ if (minstep> = maxStep) {clearinterval (timer2) ؛} start+= steplength ؛ box.scrollleft = start ؛} ، 20) لـ (var i = 0 ؛ } lis [x] .className = 'select' ؛ } وظيفة move () {// التمرير الافتراضي إلى اليسار كل 3 ثوانٍ clearinterval (timer1) ؛ timer1 = setInterval (function () {x ++ ؛ if (x> = imgs.length) {x = 0 ؛} imgscroll () ؛ for (var i = 0 ؛ i <lis.length ؛ i ++) {lis [i] .classname = 'none' ؛ lis [x] .classname = ' } move () ؛ // ابدأ وظيفة التمرير الافتراضية ؛ btnr.onclick = function () {clearinterval (timer1) ؛ x ++ ؛ if (x> = imgs.length) {x = 0 ؛ } imgscroll () ؛ يتحرك()؛ } btnl.onclick = function () {clearinterval (timer1) ؛ x-- ؛ if (x <0) {x = imgs.length-1 ؛ } imgscroll () ؛ يتحرك()؛ } لـ (var i = 0 ؛ i <lis.length ؛ i ++) {lis [i] .index = i ؛ lis [i] .onclick = function () {x = this.index ؛ imgscroll () ؛ يتحرك()؛ }} </script> </body> </html>يعتمد التأثير المحدد على تأثير صورة صورة التنقل HAO123. يمكنك الذهاب إلى الموقع للإشارة إليه.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.