JS использует массивы для создания эффектов переключения изображений для вашей ссылки. Конкретный контент заключается в следующем
Преобразование позиции элемента массива:
Разделите контент на массив, добавьте первое к концу и удалите первое
<div id = "box"> 1,2,3,4 </div> <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], «слева»)); // Получить чистый окончательный стиль // Добавить атрибуты в качестве массива конформирования в ARR, которые могут быть использованы для мультиатерноги arr.push ([getstyle (adiv [i], 'left'), getstyle (adiv [i], 'top')]); } // console.dir (arr); ainput [0] .onclick = function () {// добавить первый к концу и удалить первый arr.push (arr [0]); arr.shift (); for (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 (); for (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]; } else {return getComputEdstyle (obj, false) [attr]; }}}Простые визуализации:
Пример версии:
Идеи:
Если есть пять изображений: левые значения на рисунках с 1 по 5: 20px, 60px, 100px, 240px и 380px;
После нажатия левой кнопки переключения соответствующие значения на рисунке с 1 по 5 становятся: 60px, 100px, 240px, 380px, 20px;
----------------------------------------------------------------------------------------------------------------------------
Это эквивалентно перемещению первого элемента этого набора массива на конец: 20px, 60px, 100px, 240px, 380px, 20px;
Затем удалите первый элемент до: 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 = '2 '> <img src = "400'> </li> <li class = '2 '> <img src =". 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 = '300'> </li> </ul> <src = 'dir dir dir dir dir dir dir ’ Dirr '> </span> </div>
Пример стиля:
#box {width: 700px; высота: 300px; позиция: относительно; маржа: 20px auto; text-align: center;}#box ul {list-style: none;}#box ul li {position: absolute;}#box ul li.pos_0 {top: 50px; слева: 20px; z-index: 1; li.pos_1 {top: 20px; слева: 60px; z-index: 2; непрозрачность: 0,8;}#box ul li.pos_2 {top: 0px; слева: 100px; z-index: 3; непрозрачность: 1;}#box ul li li.pos_4 {top: 50px; слева: 380px; z-index: 1; непрозрачность: 0,5;}. Dir {Display: inline block; ширина: 45px; высота: 100px; фон: url ('изображения/button.png') no-repeat; позиция: Absolute; top: 60px; z-index: 4; 0; слева: 40px;}. Dirr {founal 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 = []; for (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], 'непрозрачность')*100)); // console.log (getStyle (ali [i], 'z-index')); // console.log (oimg.width); arr.push ([parseint (getstyle (ali [i], 'top')), parseint (getstyle (ali [i], 'непрозрачность')*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 (); for (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .getElementsbytagname ('img') [0]; //console.log(Arröbyцин]); startmove (ali [i], {слева: arr [i] [0], top: arr [i] [1], непрозрачность: arr [i] [2],}); ali [i] .style.zindex = arr [i] [3]; StartMove (oimg, {width: arr [i] [4]}); }}; onext.onclick = function () {// right arr.unshift (arr [arr.length-1]); arr.pop (); for (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .getElementsbytagname ('img') [0]; startmove (ali [i], {слева: arr [i] [0], top: arr [i] [1], непрозрачность: arr [i] [2],}); ali [i] .style.zindex = arr [i] [3]; StartMove (oimg, {width: arr [i] [4]}); }}; функция getStyle (obj, attr) {// Получить значение единицы if (obj.currentStyle) {return obj.currentStyle [attr]; } else {return getComputEdstyle (obj, false) [attr]; }}}Изображение воспроизведения:
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.