الجميع على دراية بموقع HAO123. لست بحاجة إلى قول المزيد عن التأثيرات المحددة. يمكن للأصدقاء المهتمين الرجوع إلى العروض. سيشاركك المحرر التالي فكرة تنفيذ الرمز. بالطبع ، يمكنك إضافة الرمز وتعديله وحذفه بشكل مناسب وفقًا لاحتياجاتك.
رمز المفتاح كما يلي:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> صورة carousel </title> <style> .warp {width: 600px ؛ height: 600px ؛ الموضع: relative ؛ margin: 30px auto 0 ؛ 750px ؛ الموضع: المطلق ؛ الأعلى: 0px ؛ اليسار: 0px ؛ تجاوز: مخفي ؛/*overflow-x: auto ؛*/}#box #con {width: 6000px ؛ الارتفاع: 750px ؛ verdlow: hidden ؛}#con img 0px ؛ Top: 366px ؛ العرض: 36px ؛ الارتفاع: 36px ؛ الخلفية: url (صور/btnl.png) 0 0 no-repeat ؛ المؤشر: pointer ؛}#btnr {position: absomut عدم التكرار ؛ المؤشر: مؤشر ؛}#num {الموضع: مطلق ؛ القاع: 10px ؛ اليسار: 148px ؛ overflow: hidden ؛ style list: none ؛}#num li {float: left ؛ margin: 0 5px ؛ font-size: 16px ؛ line-line: 25px ؛ المركز ؛ المؤشر: مؤشر ؛}#num li.select {خلفية اللون: أخضر ؛ اللون: أبيض ؛} </style> </head> <body> <div> <div id = "box" src = "images/meinv3.jpg"> <img src = "images/meinv4 id = "num"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> <li> 6 </li> </ul> </viv> <script> var box = document.getElementByid ('box') imgs = con.getElementsByTagName ('img') ؛ var btnl = document.getElementById ('btnl') ؛ var btnr = document.getElementById ('btnr') ؛ var num = document.getElementById ('num') imgw = imgs [0] .clientwidth ؛ var x = 0 ؛ function imgscroll () {// switch image var start = box.scrollleft steplength = change/maxstep ؛ clearinterval (timer2) ؛ timer2 = setInterval (function () {minstep ++ ؛ // console.log (minstep) ؛ if (minstep> = maxStep) {clearinterval (timer2) ؛} start+= steplength ؛ box.scrollft = start ؛ i ++) {lis [i] .classname = 'none' ؛} lis [x] .classname = 'select' ؛} function move () {// default scrolling to the left in clearninterval (timer1) ؛ i = 0 ؛ btnr.onclick = function () {clearinterval (timer1) ؛ x ++ ؛ if (x> = imgs.length) {x = 0 ؛ {x = imgs.length-1 ؛} imgscroll () ؛ move () ؛} لـ (var i = 0 ؛ i <lis.length ؛ i ++) {lis [i] .index = i ؛ lis [i]ما ورد أعلاه هو تأثير Carousel الصورة لصفحة التنقل HAO123 JS HAO123 التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!