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> <div> <img src = "image/3.jpg"/> </viv> <div> <img src = "image/4.jpg"/> </div> <img src = <viv> <img src = "image/6.jpg"/> </viv> </viv> <viv> <</div> <viv >> </viv> <div id = "tabs"> <viv> 1 </viv> <viv> 2 </iv> <div> 3 </viv>
رمز CSS:
* {padding: 0px ؛ الهامش: 0px ؛}. } .btn {الموضع: absolute ؛ الارتفاع: 90 بكسل ؛ العرض: 60px ؛ الخلفية: RGBA (0،0،0،0.5) ؛/*اضبط لون الخلفية على الأسود والشفافية 50 ٪*/ اللون: #ffffff ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 90 بكسل ؛ حجم الخط: 40 بكسل ؛ أعلى: 155px ؛/*ارتفاع الصورة 400/2-45*/المؤشر: مؤشر ؛ /*Display:NONE ؛*/) أعلى: 370 بكسل ؛ Margin-Left: 350px ؛}. Tab {Height: 20px ؛ العرض: 20 بكسل ؛ الخلفية:#05E9E2 ؛ رفع الخط: 20 بكسل ؛ محاذاة النص: المركز ؛ حجم الخط: 10 بكسل ؛ تعويم: اليسار. اللون: #ffffff ؛ يمين الهامش: 10px ؛ الحدود الحدودية: 100 ٪ ؛ المؤشر: مؤشر ؛}. bg {background:#00ff21 ؛}رمز JS:
/// <مرجع path = "_ المراجع $ (". //يتم التوقف بعد الفأر؟ -1 إذا كان العرض (I == 0) {i = 6 ؛ دالة show () {//$("#allswapimg").hover(function () // {// $ (". btn"). show () ؛ //} ، function () // {// $ ( // fadein (300) تتلاشى في ، Fadeout (300) يتلاشى ، تصفية الوقت 0.3S $ (". $ (". tab"). eq (i) .addClass ("bg"). siblings (). removeClass ("bg") ؛} وظيفة showtime () {time = setInterval show () ؛} ، 3000) ؛المثال أعلاه لمجرد تحقيق تأثير صور carousel هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.