لقد شاركت خوارزمية الرسم البياني للركض التي تغير التسلسل الهرمي من قبل. اليوم ، أواصل استخدام الشفافية لتحقيق خوارزمية الرسم البياني الخالي من الإزاحة.
منطق التنفيذ: ضع جميع الصور المراد أن يتم تجميعها معًا ، أي تكديسها طبقة تلو الأخرى ، واستخدم السمات الهرمية لضبط ترتيب الصورة الصحيح ، وتعيين شفافية الصورة على 0 ، ثم جعل شفافية الصورة الأولى الأولية إلى 1. الخوارزمية المحددة هي على النحو التالي:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> تغيير خوارزمية الشفافية (الكلاسيكية) </title> <style media = "screen"> * {margin: 0 ؛ الحشو: 0 ؛ } .wrap {width: 60 ٪ ؛ الهامش: السيارات ؛ الموقف: قريب } .wrap img {width: 100 ٪ ؛ الموقف: مطلق ؛ اليسار: 0 ؛ أعلى: 0 ؛ الانتقال: 2S ؛ } .wrap img: nth-child (1) {الموضع: النسبية ؛ } .wrap .follow {width: 150px ؛ الارتفاع: 30 بكسل ؛ الهامش: السيارات ؛ العرض: فليكس. تبرير المحتوى: الفضاء بين ؛ } .wrap. follow span {width: 10px ؛ الارتفاع: 10 بكسل ؛ الحدود الحدودية: 50 ٪ ؛ الحدود: 3 بكسل رمادي صلبة. } .wrap. } </style> </head> <body> <viv> <img src = "img/01.jpg"/> <img src = "img/02.jpg"/> <img src = "img/03.jpg"/> <img src = "img/04.jpg"/> value = "◀︎"> <input id = "rightbut" type = "button" name = "name" value = "▶ ︎"> <viv> <span> </span> <span> </span> <span> </span> <span> </span> </span> document.queryselectorall ('. wrap img') ؛ var يمتد = document.queryselectorall ('. اتبع span') ؛ var leftbut = document.getElementById ('LeftBut') ؛ var rightbut = document.getElementById ('rightbut') ؛ // تحديد وظيفة المعلمة showimage (index) {for (var i = 0 ؛ i <images.length ؛ i ++) {يمتد [i] .index = i ؛ // سمات مخصصة ، احصل على الصور المرتبطة المقابلة [i] "0 '؛ // تعيين كل شفافية الصورة إلى 0 تمتد [i] // قم بتعيين لون الخلفية للصورة مع قيمة تراكب المعلمة الواردة إلى الفترات البيضاء [الفهرس] .style.background = 'White' ؛ } showImage (0) ؛ // اضبط نمط الصورة في البداية مع قيمة فرعية المعلمة الواردة إلى 0 var count = 1 ؛ // get counter // تحديد وظيفة carousel التلقائية ImageMove () {// إذا كانت قيمة العدد يمكن تقسيمها بمقدار 4 ، ثم إعادة تعيين العدد إلى 0 ؛ if (count ٪ 4 == 0) {count = 0 ؛ } // تمرير قيمة العد كمعلمة للدالة showimage () ؛ showimage (العد) ؛ COUNT ++ ؛ // تنفيذ مرة واحدة +1} // قم بتعيين الدالة ImageMove () للاتصال مرة واحدة كل ثانيتين وتعيينها إلى ImageInitialMove var imageInitialMove = setInterval ('ImageMove ()' ، 2000) ؛ // انقر فوق الحدث leftbut.onclick = function () {// مسح المؤقت clearinterval (imageInitialMove) ؛ // نظرًا لأن الاتجاه معاكس للعجلة التلقائية ، فمن الضروري الحكم على أن قيمة العد هي 0 ، وتعيينه إلى 4 ، والاستمرار في حلقة إذا (COUNT == 0) {count = 4 ؛ } count-؛ showimage (count) ؛ // استدعاء عدد الوظائف أولاً من -ImageInitialMove = setInterval ('ImageMove ()' ، 2000) ؛ } // the right-to-rightbut.onclick = function () {clearinterval (imageInitialMove) ؛ ImageMove () ؛ // لأن الاتجاه هو نفسه الكاروسيل التلقائي ، اتصل مباشرة // إعادة تعيين Timer ImageInitialMove = setInterval ('ImageMove ()' ، 2000) ؛ } // انقر فوق حدث لـ DOTS لـ (var i = 0 ؛ i <Spans.Length ؛ i ++) {يمتد [i] .onclick = function () {clearinterval (imageInitialMove) ؛ // تعيين القيمة الفرعية للنقطة التي تم النقر عليها حاليًا إلى عدد = event.target.index ؛ // استدعاء الوظيفة showimage (count) ؛ ImageInitialMove = setInterval ('ImageMove ()' ، 2000) ؛ }} </script> </html>مشاركة موضوع رائع: صورة jQuery carousel JavaScript Picture carousel bootstrap picture carousel
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.