يستخدم JS المصفوفات لإنشاء تأثيرات تبديل الصور للرجوع إليها. المحتوى المحدد كما يلي
تحويل موقف عنصر الصفيف:
اقسم المحتوى إلى صفيف ، وأضف أول واحد إلى النهاية ، وحذف أول واحد
<div id = "box"> 1،2،3،4 </viv> <input type = "button" value = 'switch' id = 'input'> <script> window.onload = function () {var odiv = document.getElementById ('box') ؛ var oinput = document.getElementById ('input') ؛ oinput.onclick = function () {var arr = odiv.innerhtml.split ('،') ؛ // console.log (arr) ؛ arr.push (arr [0]) ؛ // أضف الأول إلى النهاية وحذف أول arr.shift () ؛ odiv.innerhtml = arr ؛ }} </script>تأثير تبديل صورة المحاكاة:
window.onload = function () {var adiv = document.getElementSbyTagName ('div') ؛ var ainput = document.getElementsByTagName ('input') ؛ var arr = [] ؛ // قم بإنشاء صفيف فارغ لتخزين سمات (var i = 0 ؛ i <adiv.length ؛ i ++) {console.dir (getStyle (adiv [i] ، 'left')) ؛ // احصل arr.push ([getStyle (adiv [i] ، 'Left') ، getStyle (adiv [i] ، 'top')]) ؛ } // console.dir (arr) ؛ Ainput [0] .onclick = function () {// أضف الأول إلى النهاية وحذف أول arr.push (arr [0]) ؛ arr.shift () ؛ لـ (var i = 0 ؛ i <adiv.length ؛ i ++) {// بعد تشغيل المصفوفة ، قم بتعيين adiv [i] .style.left = arr [i] [0] ؛ adiv [i] .style.top = arr [i] [1] ؛ }} ؛ Ainput [1] .onclick = function () {// أضف آخر واحد إلى الأمام وحذف آخر arr.unshift (arr.length-1]) ؛ arr.pop () ؛ لـ (var i = 0 ؛ i <adiv.length ؛ i ++) {adiv [i] .style.left = arr [i] [0] ؛ adiv [i] .style.top = arr [i] [1] ؛ }} ؛ وظيفة getStyle (obj ، attr) {// الحصول على النمط النهائي if (obj.currentStyle) {return obj.currentStyle [attr] ؛ } آخر {return getComputedStyle (obj ، false) [attr] ؛ }}}عروض بسيطة:
نسخة مثال:
الأفكار:
إذا كانت هناك خمس صور: القيم اليسرى للشكل 1 إلى 5 هي: 20 بكسل ، 60 بكسل ، 100 بكسل ، 240 بكسل ، و 380 بكسل ؛
بعد النقر فوق زر التبديل الأيسر ، تصبح القيم المقابلة للشكل 1 إلى 5: 60px ، 100px ، 240px ، 380px ، 20px ؛
------------------------------------------------------------------------------------------------------------------------------------
يعادل تحريك العنصر الأول من هذه المجموعة من الصفيف إلى النهاية: 20 بكسل ، 60 بكسل ، 100 بكسل ، 240 بكسل ، 380 بكسل ، 20 بكسل ؛
ثم احذف العنصر الأول إلى: 60px ، 100px ، 240px ، 380px ، 20px ؛
وهلم جرا:
مثال على التصميم:
<div id = "box"> <ul> <li class = 'pos_0'> <img src = "images/1.png" width = '300'> </li> <li class = 'pos_1'> <img src = "images/1.jpg" width = '400' </li> <li class = 'pos_2'> width = '500'> </li> <li class = 'pos_3'> <img src = "images/3.jpg" width = '400'> </li> <li class = 'pos_4'> <img src = "images/1.jpg" width = '/li> </ul> dirr '> </span> </viv>
مثال على النمط:
#box {width: 700px ؛ الارتفاع: 300px ؛ الموضع: النسبية ؛ الهامش: 20px auto ؛ text-align: center ؛}#box ul {style style: none ؛}#box ul li {position: apport ؛}#box ul li.pos_0 {top: 50px ؛ left: z-index: 1 ؛ 1 ؛ li.pos_1 {top: 20px ؛ اليسار: 60px ؛ z-index: 2 ؛ التعتيم: 0.8 ؛}#box ul li.pos_2 {top: 0px ؛ left: 100px ؛ z-index: 3 ؛ expacity: 1 ؛}#box ul li.3 {top: 20px ؛ left: 240px ؛ z-index: 2 ؛ li.pos_4 {top: 50px ؛ اليسار: 380px ؛ z-index: 1 ؛ عتامة: 0.5 ؛}. dir {display: inline block ؛ width: 45px ؛ height: 100px ؛ background: url ('images/button.png' 0 ؛ اليسار: 40px ؛}. dirr {background -position: -55px 0 ؛ اليمين: 40px ؛}رمز JS:
window.onload = function () {var opre = document.getElementSbyClassName ('dir') [0] ؛ var Onext = document.getElementSbyClassName ('dir') [1] ؛ var ali = document.getElementSbyTagname ('li') ؛ var arr = [] ؛ لـ (var i = 0 ؛ i <ali.length ؛ i ++) {var oimg = ali [i] .getElementSbyTagName ('img') [0] ؛ // console.log (getStyle (ali [i] ، 'Left')) ؛ // console.log (parseint (getStyle (ali [i] ، 'opated')*100)) ؛ // console.log (getStyle (ali [i] ، 'z-index')) ؛ // console.log (oimg.width) ؛ arr.push ([parseint (getStyle (ali [i] ، 'top')) ، parseint (getStyle (ali [i] ، 'opacity')*100) ، parseint (getStyle (ali [i] ، 'z-index') ، oimg.width]) ؛ // console.log (arr [i] [2]) ؛ } // console.dir (arr) ؛ opre.onclick = function () {// arr.push (arr [0]) ؛ arr.shift () ؛ لـ (var i = 0 ؛ i <ali.length ؛ i ++) {var oimg = ali [i] .getElementSbyTagName ('img') [0] ؛ //console.log(arr budapi/budap2]) ؛ StarTmove (ali [i] ، {left: arr [i] [0] ، top: arr [i] [1] ، opabity: arr [i] [2] ،}) ؛ علي [i] .style.zindex = arr [i] [3] ؛ StarTmove (OIMG ، {width: arr [i] [4]}) ؛ }} ؛ onext.onclick = function () {// right arr.unshift (arr [arr.length-1]) ؛ arr.pop () ؛ لـ (var i = 0 ؛ i <ali.length ؛ i ++) {var oimg = ali [i] .getElementSbyTagName ('img') [0] ؛ StarTmove (ali [i] ، {left: arr [i] [0] ، top: arr [i] [1] ، opabity: arr [i] [2] ،}) ؛ علي [i] .style.zindex = arr [i] [3] ؛ StarTmove (OIMG ، {width: arr [i] [4]}) ؛ }} ؛ وظيفة getStyle (obj ، attr) {// احصل على قيمة الوحدة if (obj.currentStyle) {return obj.currentStyle [attr] ؛ } آخر {return getComputedStyle (obj ، false) [attr] ؛ }}}صورة التكاثر:
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.