Сегодня я увидел скользящее изображение, написанное кем -то другим. Это выглядело круто. При чтении исходного кода это казалось немного сложным. Поэтому я подражал и написал один. Эффект был таким же, как у исходной веб -страницы, но мой собственный код JS прост в логике и должен быть улучшен.
PS: Я написал карусель два дня назад, и эта совместимость не очень хороша. Когда я написал эту веб -страницу сегодня, я также следовал этой идее и очень хорошо работал в Google Chrome. Многие функции Firefox не могут быть реализованы. Поскольку Rab-Panel использует абсолютное позиционирование, перевод перевода изменяется налево. После изменений каждый браузер работает хорошо.
Конкретный код выглядит следующим образом
HTML -код (без комментариев)
<div> <h1> Parallax Slider </h1> <div> <div> <div id = "bg_1" style = "слева: 0px;"> </div> <div id = "bg_2" стиль = "слева: 0px;"> </div> <div id = "bg_2" style = "слева: 0px;"> </div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <id = ". style = "left: 0px;"> <div> <img id = "img_1" src = "Images/1.jpg"> </div> <div> <img src = "Images/2.jpg"> </div> <div> <img src = "Images/3.jpg"> </div> <div> <img src = "4. src = "Images/5.jpg"> </div> <div> <img src = "Images/6.jpg"> </div> </div> <div> <span id = "erv_btn"> </span> <pran id = "next_btn"> </span> </div> <div> <div> <pran = "next_btn"> </span> </div> <div> <div> <span> <pran = " id = "show_small"> <ul> <li> <img src = "Images/thumbs/1.jpg"> </li> <li> <img src = "Images/thumbs/2.jpg"> </li> <li> <img src = "Image/thumbs/3.jpg"> </li> <li> src = "Images/thumbs/4.jpg"> </li> <li> <img src = "Images/thumbs/5.jpg"> </li> <li> <img src = "Images/thumbs/6.jpg"> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </li> </ul> </div> </div> </div> </div> </li>
CSS -код (прочитайте сами):
* {маржа: 0; Заполнение: 0; } html, body, .container {ширина: 100%; высота: 100%; Фондовая семья: «Microsoft Yahei»; } .container {founal-color: #222; Overflow-X: скрытый; } .container h1 {font-size: 50px; Цвет: #CCC; Текст-альбом: Центр; шрифт-вес: смелее; Высота: 120px; высота линии: 120px; } .wrap {позиция: относительно; Ширина: 600%; Высота: 400px; Пограничная топ: 10PX SOLID #333; Пограничный подклад: 10px Solid #333; маржинальная версия: 20px; } .bg {position: Absolute; Ширина: 100%; высота: 100%; слева: 0; Верх: 0; -Вебкит-транзиция: все 1s; -moz-транзиция: все 1s; -ms-transition: все 1s; -o-transition: все 1s; -o-transition: все 1s; Переход: все 1s; } .bg-1 {founal: url (images/bg1.png); } .bg-2 {founal: url (images/bg2.png); } .bg-3 {founal: url (images/bg3.png); } .wrap-panel {position: Absolute; Ширина: 100%; высота: 100%; -Вебкит-транзиция: все 1s; -Моз-трансляция: все 1s; -Мас-транзиция: все 1s; -О-транзиция: все 1s; Переход: все 1s; } .panel {ширина: 16,66%; высота: 100%; Плавание: осталось; } .panel img {display: block; Поле: 0 Авто; маржинальная версия: 35px; граница радий: 10px; Граница: 10px твердый RGBA (143, 143, 143, 0,6); } .navigation-button Span: Hover {непрозрачность: 0,8}. Ширина: 30px; Высота: 60px; фоновый цвет: #344133; граница радий: 10px; курсор: указатель; непрозрачность: 0,4; }. } .next-button {founale: #000 url (image/next.png) Центр Центр NO-Repeat; } .show-small {position: Absolute; Ширина: 680px; Внизу: 20px; } .show-small ul {list-style: none; } .show-small ul li {float: left; Покрас: 0 10px; Граница: 5px solid #fff; непрозрачность: 0,7; Курсор: указатель; -Webkit-транзиция: все .3s; -Моз-транзиция: все .3s; -ms-транзиция: все .3s; -О-транзиция: все .3s; Переход: все .3s; } .show-small ul li: Hover {Margin-top: -15px; }код JS (небольшая демонстрация):
window.onload = function () {// Получить элемент var getDom = function (id) {return typeof id === "string"? Document.getElementById (id): id; } // Получить объект var img = getdom ('img_1'); var provdom ("perv_btn"); var Next = getDom ("next_btn"); var wrap_panel = getDom ('wrap_panel'); var bg_1 = getdom ("bg_1"); var bg_2 = getdom ("bg_2"); var bg_3 = getdom ("bg_3"); var show_small = getdom ("show_small"); var list = show_small.getelementsbytagname ("li"); var wwwidth; // Связанное событие для элемента var addevent = function (id, event, fn) {var el = getDom (id) || документ; if (el.addeventlistener) {el.addeventlistener (event, fn, false); } else if (el.attachevent) {el.attachevent ('on' + event, fn); }} function init () {// позиционировать кнопку // левое расстояние от кнопки прямого = левое расстояние от изображения + граница prov.style.left = img.offsetleft + 10 + 'px'; // Верхнее расстояние передней кнопки = верхнее расстояние изображения + половина высоты изображения - половина кнопки Prov.style.top = img.offsettop + img.clientHeight/2 - prev.clientHeight/2 + 'px'; next.style.left = img.offsetleft + img.clientwidth + 10 - next.clientwidth + 'px'; next.style.top = prev.style.top; // позиционировать контейнер с небольшими изображениями wwwidth = document.documentelement.clientWidth || document.body.clientWidth; show_small.style.left = (wwwidth - show_small.clientwidth)/2 + 'px'; } // Функция обработки маленькой картинки small_img () {// вращание изображения для (var i = 0; i <list.length; i ++) {// rowate direction = math.pow (-1, parseint (math.random ()*10)); Список [i] .style = "transform: rotate (" + (math.random ()*20*направление) + "deg)"; } list [0] .style.opacity = 1; } function only_one (el, num) {for (var i = 0; i <el.length; i ++) {el [i] .style.opacity = 0,7; } // console.log (num); el [num] .style.opacity = 1; } // Когда браузер увеличивается, window.onresize = function () {init (); } // Выполнить функцию init (); small_img (); addEvent (prev, 'click', function () {// изменять левые var oldpos of wrap-panel oldpos = parseint (wrap_panel.style.left); if (oldpos == 0) {// фоновая панку -wwidth*(list.length -1) + 'px'; Parseint (-(Oldpos/Wwidth + 1)*100) + 'px'; 1))*500) + 'px'; addEvent (Далее, 'click', function () {// Изменить левые var oldpos of wrap-panel oldpos = parseint (wrap_panel.style.left); if (oldpos == -wwidth*(list.length-1)) {// фоновая сковорода с изображением контейнера изображения bg_1.style.left = bg_2.style.left = bg_3.style.left = wry_panel.style.left = '0px'; bg_1.style.left = (OldPos - WWIDTH + ParseInt ( - (OldPos/WWIDTH + 1)*100) + 'PX'; + parseint (-(OldPos/Wwidth + 1))*500) + 'px'; }Выше приведено в этой статье, я надеюсь, что для всех будет полезно изучить программирование JavaScript.