1. النقاط الرئيسية:
1. عندما يتم تحميل الصفحة ، تتداخل الصور وتكدس معًا [تحديد المواقع المطلقة] ؛
2. تظهر الصورة الأولى ، والبعض الآخر مخفي.
3. اضبط المُخطط وضبط لون المنصب المتراكم بحيث يتحرك مع الصورة ؛
4. انقل الماوس إلى الصورة ، وعرض الرموز المتحركة اليسرى واليمين ، وحرك الماوس بعيدًا ، واستمر في الكاروسيل ؛
2. رمز التنفيذ:
رمز HTML:
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ href = "css/lunbimg.css" rel = "stylesheet"/> <script src = "js/jquery-1.1.2.min.js"> </script> <script src = "js/lunbimg.js src = "image/1.jpg"/> </viv> <viv> <img src = "image/2.jpg"/> </div> <viv> <img src = "image/3.jpg"/> </div> <img src = "image/4.jpg" /> </viv> <viv> <img src = "image/6.jpg"/> </viv> </viv> <viv> <</div> <viv>> </viv> <div id = "tabs"> <viv> 1 </viv> <viv> 2 </viv> <viv> 3 </viv> <viv> 4 </viv> <viv> 5 </viv> <viv> 6 </viv> </viv> </body> </html>
رمز CSS:
* {padding: 0px ؛ الهامش: 0px ؛}. 50 ٪*/color: #ffffff ؛ text-align: center ؛ خط الارتفاع: 90px ؛ حجم الخط: 40px ؛ أعلى: 155px ؛/*ارتفاع الصورة 400/2-45*/cursor: pointer ؛/*display: none ؛*/}. btnright {يسار: 840px ؛ {الموضع: absolute ؛ top: 370px ؛ margin-left: 350px ؛}. tab {الارتفاع: 20px ؛ العرض: 20px ؛ الخلفية:#05e9e2 ؛ خط الذروة: 20px ؛ النصوص النصية: المركز ؛ الحجم: 10px ؛ عائم: اليسار ؛ اللون: #ffffff ؛ الهامش-اليمين: 10px ؛ الحدود: 100 ٪ ؛ مؤشر: pointer ؛}.رمز JS:
/// <reference path = "_ References.js"/> var i = 0 ؛ $ (". $ (هذا) .index () ؛ show () ؛ // كيفية التوقف بعد وضع الماوس؟ ClearInterval (time) ؛ // بعد النقر ، -1if (i == 0) {i = 6 ؛} i -؛ show () ؛ showtime () ؛}) ؛ $ (". -1 ؛} i ++ ؛ show () ؛ showtime () ؛}) ؛}) ؛ وظيفة show () {//$("#allswapimg").hover(function () // {// $ (". btn"). يتلاشى في ، Fadeout (300) يتلاشى ، تصفية الوقت 0.3S $ (". setInterval (function () {i ++ ؛ if (i == 6) {// هناك 6 صور فقط ، لذلك لا يمكنني تجاوز 6. إذا كنت مساوياً 6 ، فسوف نجعلها تساوي الصورة الأولى i = 0 ؛} show () ؛} ، 3000) ؛}ما سبق هو رمز تنفيذ مخطط carousel استنادًا إلى JavaScript المقدمة لك. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!