تنفيذ تأثير تبديل الصور على أساس جافا سكريبت

تشاركك الأمثلة في هذه المقالة مع تأثير JS لتحقيق تبديل الصور للرجوع إليه. المحتوى المحدد كما يلي

استخدم JS لإدراك تأثير النقر فوق الأزرار وتبديل الصور:

 <div id = "box"> <div id = "img_box"> <img src = "../ raw/b1.jpg"> <img src = "../ raw/b2.jpg"> <img src = "../ raw/b3.jpg"> <img src = " id = "right"> </viv> </viv>

الهيكل: استخدم عرضًا ثابتًا وارتفاعًا لتصنيع الحاوية الخارجية ، قم بتعيين الفائض على المخفية ،

ثم تقوم الطبقة الداخلية IMG_BOX بتعيين العرض على عرض الصندوق أربعة أضعاف ويكون الارتفاع هو نفسه. وهذا يعني أن img_box يحتوي على أربعة IMGs ، ولكن واحد فقط مرئي هو. يعمل اثنين من divs ، اليسار واليمين أدناه كأزرار لتحقيق النقر لتبديل الصور. تبديل الصور يعني تغيير السمة اليسرى لـ img_box ، لذلك يجب تعيين img_box على الموقف على المطلق. للراحة ، يتم تعيين موضع المربع على العلاقة ، لذلك يتم وضع img_box بالنسبة إلى المربع. تم تعيين أربع صور تطفو على اليسار ، مع نفس العرض والارتفاع مثل المربع.

رمز CSS:

 *{الهامش: 0 ؛ Padding: 0 ؛}. Box {Width: 800px ؛ الارتفاع: 400 بكسل ؛ الهامش: 20 بكسل Auto ؛ الموقف: قريب تجاوز: مخفي ؛}. img_box {الارتفاع: 400px ؛ العرض: 3200 بكسل ؛ الموقف: مطلق ؛ -الموز ترانس: 0.5S ؛ -webkit-transition: 0.5s ؛} img {width: 800px ؛ الارتفاع: 400 بكسل ؛ Float: Left ؛}. Switch {Width: 200px ؛ الارتفاع: 100 ٪ الموضع: Absolute ؛}#Left {Left: 0px ؛ أعلى: 0px ؛ الخلفية: -moz-liner-regient (يسار ، RGBA (84 ، 84 ، 84 ، 0.50) ، RGBA (20 ٪ ، 20 ٪ ، 20 ٪ ، 0)) ؛ الخلفية: -webkit-linar-radient (يسار ، RGBA (84 ، 84 ، 84 ، 0.50) ، RGBA (20 ٪ ، 20 ٪ ، 20 ٪ ، 0)) ؛}#يمين {يمين: 0px ؛ أعلى: 0px ؛ الخلفية: -moz-linar-regient (يسار ، RGBA (20 ٪ ، 20 ٪ ، 20 ٪ ، 0) ، RGBA (84 ، 84 ، 84 ، 84 ، 0.5)) ؛ الخلفية: -webkit-liner-radient (يسار ، RGBA (20 ٪ ، 20 ٪ ، 20 ٪ ، 0) ، RGBA (84 ، 84 ، 84 ، 84 ، 0.5)) ؛}#اليسار: Hover {Background: -Moz-Linar-Fradient (يسار ، RGBA (0 ، 0 ، 0،0.5) RGBA (20 ٪ ، 20 ٪ ، 20 ٪ ، 0)) ؛}#يمين: Hover {Background: -Moz-Liner-Radient (يسار ، RGBA (0 ، 0 ، 0،0.5) ، RGBA (20 ٪ ، 20 ٪ ، 20 ٪ ، 0)) ؛ RGBA (0 ، 0 ، 0،0.5)) ؛ الخلفية: -webkit-linar-radient (يسار ، RGBA (20 ٪ ، 20 ٪ ، 20 ٪ ، 0) ، RGBA (0 ، 0 ، 0،0.5)) ؛}

استخدم اليسار واليمين خصائص لون الخلفية وخصائص التدرج الشفافية ، وتتم إضافة متصفح Firefox فقط ومتصفح WebKit. بالإضافة إلى ذلك ، بعض متصفحات IE هي IE و WebKit Dual Cores مثل 360 متصفح آمن

الخلفية: -moz-liner-regient (يسار ، RGBA (84 ، 84 ، 84 ، 0.50) ، RGBA (20 ٪ ، 20 ٪ ، 20 ٪ ، 0)) ؛

الخلفية: -webkit-linar-Radient (يسار ، RGBA (84 ، 84 ، 84 ، 0.50) ، RGBA (20 ٪ ، 20 ٪ ، 20 ٪ ، 0)) ؛

من أجل تحقيق التحولات السلسة أثناء التبديل ، تتم إضافة خاصية الانتقال:

-الموز ترانس: 0.5S ؛

-بكيت الانتقال: 0.5S ؛

رمز JS:

 var box ؛ var count = 1 ؛ window.onload = function () {box = document.getElementById ("img_box") ؛ var left = document.getElementById ("Left") ؛ var right = document.getElementById ("right") ؛ left.addeventListener ("انقر" ، _ اليسار) ؛ right.adDeventListener ("Click" ، _ right) ؛ document.body.addeventListener ("Mouseover" ، Demo) ؛} الدالة _right () {var dis = 0 ؛ if (count <4) {dis = count*800 ؛ } آخر {dis = 0 ؛ العد = 0 ؛ } box.style.left = "-"+dis+"px" ؛ count+= 1 ؛} الدالة _left (الحدث) {var dis = 0 ؛ if (count> 1) {dis = (2-count)*800 ؛ } آخر {dis = -3*800 ؛ العد = 5 ؛ } box.style.left = dis+"px" ؛ العد- = 1 ؛}

استخدم العد المتغير العالمي لتسجيل الصورة المعروضة حاليًا. عند النقر فوق زر التبديل ، قم بحساب الصورة التي يجب عرضها وفقًا للعدد ، ثم قم بحساب السمة اليسرى لـ IMG_BOX.

ما سبق هو رمز تطبيق تأثيرات تبديل الصور بواسطة JS المقدمة لك. آمل أن يساعدك في تحقيق تأثيرات تبديل الصور.