Примеры в этой статье делятся с вами влиянием 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 = "../ raw/b4.jpg"> </div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <dip> id = "right"> </div> </div>
Структура: используйте фиксированную ширину и высоту div, чтобы сделать самый внешний контейнер, установите переполнение в скрытое,
Затем внутренний слой IMG_BOX устанавливает ширину в четыре раза ширину коробки, а высота одинакова. То есть img_box содержит четыре IMG, но только один видимый. Два DOV, слева и справа внизу, действуют как кнопки для достижения нажатия, чтобы переключить изображения. Переключение изображений означает изменение левого атрибута img_box, поэтому img_box должен установить позицию на абсолютную. Для удобства позиция коробки устанавливается на отношение, поэтому IMG_BOX расположен по сравнению с коробкой. Четыре изображения устанавливают налево, с той же шириной и высотой, что и коробка.
CSS -код:
*{маржа: 0; Надо: 0;}. Box {ширина: 800px; Высота: 400px; Маржа: 20px Auto; позиция: относительно; переполнение: hidden;}. img_box {hight: 400px; Ширина: 3200px; позиция: абсолютно; -Моз-трансляция: 0,5 с; -Webkit-transition: 0,5S;} img {ширина: 800px; Высота: 400px; float: left;}. Switch {width: 200px; высота: 100%; Положение: Absolute;}#Left {Left: 0px; Верх: 0px; Фон: -моз-линейр-градиент (слева, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0)); Предпосылки: -Ветбкит-линейный градиент (слева, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0));}#справа {справа: 0px; Верх: 0px; Предпосылки: -моз-линейр-градиент (слева, RGBA (20%, 20%, 20%, 0), RGBA (84, 84, 84, 84, 0,5)); Справочная информация: -Webkit-Linear-Gradient (слева, RGBA (20%, 20%, 20%, 0), RGBA (84, 84, 84, 84, 0,5));}#слева: нагня Фон: -моз-линейр-градиент (слева, rgba (0, 0, 0,0,5), Rgba (20%, 20%, 20%, 0));}#справа: Hover {фон: -моз-линейр-градиент (слева, RGBA (20%, 20%, 20%, 0), RGBA (0, 0, 0,0,5)); Справочная информация: -Webkit-Linear-Gradient (слева, RGBA (20%, 20%, 20%, 0), RGBA (0, 0, 0,0,5));}Влево и вправо используйте фон цвета и свойства градиента прозрачности, добавляются только браузер Firefox и браузер Webkit. Кроме того, некоторые браузеры IE являются двойными ядрами IE и Webkit, такие как 360 Secure Browser
Фон: -моз-линейр-градиент (слева, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0));
Предпосылки: -Ветбкит-линейр-градиент (слева, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0));
Для достижения плавных переходов во время переключения добавляется свойство перехода:
-Моз-трансляция: 0,5 с;
-Вобкит-трансляция: 0,5 с;
JS -код:
var box; var count = 1; window.onload = function () {box = document.getElementbyId ("img_box"); var Left = document.getElementById ("слева"); var right = document.getElementbyId ("right"); Left.AddeventListener ("click", _ Left); right.addeventlistener ("Щелкни", _ right); document.body.addeventlistener ("mouseover", demo);} function _right () {var dis = 0; if (count <4) {dis = count*800; } else {dis = 0; count = 0; } box.style.left = "-"+dis+"px"; count+= 1;} функция _left (event) {var dis = 0; if (count> 1) {dis = (2-n-count)*800; } else {dis = -3*800; count = 5; } box.style.left = dis+"px"; count- = 1;}Используйте количество глобальных переменных, чтобы записать в данный момент отображаемое изображение. Нажав кнопку переключения, вычислите, какое изображение следует отображать в соответствии с количеством, а затем вычислить и установить левый атрибут IMG_BOX.
Выше приведен код для реализации эффектов переключения изображений с помощью JS, представленного вам. Я надеюсь, что это поможет вам достичь эффектов переключения изображений.