Я поделился алгоритмом графика карусели, который раньше меняет иерархию. Сегодня я продолжаю использовать прозрачность для достижения алгоритма графика каруселей без смещения.
Логика реализации: позиционируйте все изображения, которые должны быть мечены вместе, то есть, сложите их слой за слоем и используйте иерархические атрибуты для регулировки правильного порядка изображения, установите прозрачность изображения на 0, а затем сделайте прозрачность первоначального первого изображения на 1. Конкретный алгоритм следующая:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <Title> изменить алгоритм прозрачности (классический) </title> <style media = "screen"> * {margin: 0; Заполнение: 0; } .wrap {ширина: 60%; Порность: Авто; позиция: относительно; } .wrap img {width: 100%; позиция: абсолютно; слева: 0; Верх: 0; Переход: 2 с; } .wrap img: nth-child (1) {позиция: относительно; } .wrap .follow {width: 150px; Высота: 30px; Порность: Авто; дисплей: Flex; ustify-content: Space-Betweed; } .wrap .follow span {width: 10px; Высота: 10px; граница радий: 50%; Граница: 3PX твердый серый; } .wrap .follow Span: Hover {coursor: pointer; } </style> </head> <body> <div> <img src = "img/01.jpg"/> <img src = "img/02.jpg"/> <img src = "img/03.jpg"/> <img src = "img/04.jpg"/> <input id = "LeftBut" name = "" name = "" name = "" name = "" "" "" value="◀︎"> <input id="rightBut" type="button" name="name" value="▶︎"> <div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> <script type="text/javascript"> // Get the required element var images = document.queryselectorall ('. wroud img'); var spans = document.queryselectorall ('.. Следуйте за Span'); var leftbut = document.getElementbyId ('левый, но); var RightBut = document.getElementById ('RightBut'); // Определите функцию параметра ShowiMage (index) {for (var i = 0; i <image.length; i ++) {щиты [i] .index = i; // пользовательские атрибуты, получите соответствующие изображения подростков [i] .index = i; // Custom Attributes, получите соответствующие изображения подростка = '0'; // назначить всю прозрачность изображения на 0 пролетов [i] .Style.background = 'grey'; // Все точки. // Присвоить цвет фона изображения со значением подсказок входящего параметра к белым пролетам [index] .style.background = 'white'; } showiMage (0); // Первоначально установите стиль изображения со значением подсказок входящего параметра в 0 var count = 1; // получить счетчик // определить автоматическую функцию карусели ImageMove () {// Если значение счета может быть делено на 4, то переназнайте счет на 0; if (count % 4 == 0) {count = 0; } // Пропустить значение счета в качестве параметра в функцию showimage (); Showimage (count); count ++; // Выполнить один раз +1} // Установить функцию imageMove () для вызова один раз каждые две секунды и назначать его ImageInitialMove var ImageInitialMove = setInterval ('ImageMove ()', 2000); // Щелкните событие левое, но click = function () {// очистить таймер clearInterval (imageInitialMove); // Поскольку направление противоположно автоматическому колесу, необходимо судить, что значение счета равно 0, переназначить его на 4 и продолжать цикл, если (count == 0) {count = 4; } count-; showimage (count); // Сначала вызов количества функций из -ImageInitialMove = setInterval ('ImageMove ()', 2000); } // Право направлять ImageMove (); // Потому что направление совпадает с автоматической каруселью, вызовите напрямую // переназначить таймер ImageInitialMove = setInterval ('ImageMove ()', 2000); } // Нажмите на событие для точек для (var i = 0; i <spans.length; i ++) {spans [i] .onclick = function () {clearInterval (imageInitialMove); // Присвоение значению подсказка в данный момент нажатию в данный момент, чтобы count count count = event.target.index; // вызовуте функцию Showimage (count); ImageInitialMove = setInterval ('ImageMove ()', 2000); }} </script> </html>Замечательное обмен темами: jquery picture carousel javascript picture carousel bootstrap picture carousel
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.