Диаграммы карусели все еще относительно распространены в будущих приложениях и могут быть реализованы без особой строки кода. Но если вы только освоите базовые знания JS, как вы можете использовать меньше и простых логических методов для его достижения? Вот несколько разных практик:
1. Используйте метод смещения для достижения
Во -первых, мы можем добавить Div в тело и установить ширину до процента (адаптивная страница). Если пропорция специфична для того, чьего процента она относится, мы сделаем это в соответствии с потребностями. Я не скажу здесь много. Поместите изображение в Div.
Во -вторых, часть стиля устанавливает все теги IMG на абсолютное для облегчения позиционирования
Наконец, часть JS рассказывает о логике, определяя два пустых массива. Первый массив используется для сохранения первоначального изображения, отображаемого на странице, и изображения, ожидающего входа, а второй массив сохраняет оставшиеся изображения N. Предположим, что эти два массива установлены на: wabthtoshow = []; и goout = []; wabhtoshow.shift (); Если первое изображение называется ShowFirst, а время смещения и движения установлено для изображения ShowFirst. После того, как исполнение завершено, поместите ShowFirst в хвост Goout: Boout.Push (ShowFirst); В настоящее время 0 -й элемент массива официального становления становится оригинальным вторым изображением, которое будет отображаться. Установите время перемещения и движения для этого изображения, в котором изображена изображение [0], и закройте первое изображение элемента массива обжавки и положите его в хвост массива Окрутнего, чтобы убедиться, что массив официального индекса всегда отображается изображение и изображение, которое будет отображаться. Таким образом, два массива образуют петлю, чтобы завершить реализацию изображения каруселей. Обратная логика такая же (поскольку логика слишком сложна, здесь не рекомендуется)
2. Метод использования уровня иерархии для изменения верхней картины (этот метод не имеет действий смещения, но логика очень проста и практично)
Это более интуитивно понятно для непосредственного кода: в основном у каждой строки есть комментарии
<! Doctype html> <html> <head> <meta charset = "utf-8"> <Title> диаграмма карусели (флэш-адаптивная) </title> <style media = "screen">* {margin: 0; Padding: 0;}. Raw {width: 60%; фон: red; margin: auto; position; Absolute;/*z-Index: 10;*/} input {Border: 1px Solid Lightgray; ширина: 50px; высота: 30px; фон: красный; /> <img src = "img/03.jpg"/> <img src = "img/04.jpg"/> </div> <input type = "кнопка" id = "butleft" name = "value =" ◀︎ "> </input type =" id = "butright" name = value = "▶ ▶" Элемент изображений для создания строкового массива. Строковой массив не может выполнять push pop splice или другие операции //, поэтому ему необходимо восстановить его значение в массив, с определением, после этого var images = document.getelementsbytagname ('img'); var butleft = document.getelementbyid ('butleft'); var butright = document.getelemetmeid ('butround');// получить индекса Variable, используемый для определения уровня, используемый hieremy, используемый hieremy, используется varelemy kerexy hieremy ('butround'); = 1000; // Получить пустой массив для хранения строковых элементов в изображениях var Images = []; // для цикла используется для назначения значений массиве Imagess и изменения уровня элементов в массиве для (var i = 0; i <Images.length; i ++) {Imagess [i] = Images [i]; var -current = Imagess [i];// текущий настройки round round round round round round round round round round round round round round round roundex round round round round round round round round roundex varif их. The higher the image is, the higher the level setting, so -i, so that the images will be from the first and second pictures in order... downwards in sequence currentImage.style.zIndex = -i;}// Set the counter count, perform a click event (left or right) count plus 1var count = 0;// The click event to the left butLeft.onclick = function() {// Pop up an image element from the head of the array var showFirst = ImageSs.Shift (); // Установить уровень для элемента изображения, то есть, -1000 + count, // Сделать уровень наименьшим по сравнению с другими элементами, изображение появилось в главе массива в нижней части ShowFirst.Style.zindex = - index + count; // clost strocation stope it it hail rays specess sto) shine stice stray stost sto) shipfore). Чтобы добавить 1, не учитывайте конкретное значение, просто нажмите «Событие» плюс 1 count ++;} // Нажмите на событие справа butright.onclick = function () {// Открывать элемент из хвоста изображений и назначьте его на Showfirstvar showfirst = Imagess.pop (); // Установить уровень Showfirst на максимум, 1000+, что будет отображаться на первом, на первый план. showfirst.style.zindex = index+count; // После изменения уровня вставьте его в головку массива Imagess Image.unshift (showfirst); // Нажмите один раз, чтобы добавить 1count ++;} </script> </html>Вышеуказанная статья, которую обязательно нужно прочитать в основном JS (простая реализация Click Event Carousel)-это весь контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.