1. Ключевые моменты:
1. Когда страница загружена, изображения перекрываются и складываются вместе [абсолютное позиционирование];
2. Первая картина показывает, другие скрыты;
3. Установите индекс и установите цвет индекса, чтобы он перемещался с изображением;
4. Переместите мышь на картинку, отобразите левые и правые и значки для движения, отодвиньте мышь и продолжайте в карусели;
2. Код реализации:
HTML -код:
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-eviv = " href = "css/lunbimg.css" rel = "styleSheet"/> <script src = "js/jquery-1.10.2.min.js"> </script> <script src = "js/lunbimg.js"> </script> </head> <body> <div = " src = "Image/1.jpg"/> </div> <div> <img src = "image/2.jpg"/> </div> <div> <img src = "image/3.jpg"/> </div> <div> <img src = "Image/4.jpg"/> </div> <div> <img src = "5. <div> <img src = "image/6.jpg"/> </div> </div> <div> <</div> <div >> </div> <div Id = "Tabs"> <div> 1 </div> 2 </div> <div> 3 </div> <div> 4 </div> <div> </div> <div>.
CSS -код:
* {padding: 0px; Маржа: 0px;}. Swapimg {position: Absolute; } .btn {position: Absolute; Высота: 90px; Ширина: 60px; Фон: RGBA (0,0,0,0,5);/*Установите цвет фона на черный, а прозрачность составляет 50%*/ color: #ffffff; Текст-альбом: Центр; высота линии: 90px; размер шрифта: 40px; Верх: 155px;/*Высота изображения 400/2-45*/cursor: pointer; /*дисплеи:none ;*////btnright {слева: 840px;/*Ширина изображения 900-Navigation Ширина 60*/}#вкладка {позиция: абсолют; Верх: 370px; Margin-Lefft: 350px;}. Tab {Height: 20px; Ширина: 20px; Фон:#05E9E2; высота линии: 20px; Текст-альбом: Центр; размер шрифта: 10px; Плавание: осталось; Цвет: #ffffff; Право маржи: 10px; граница радий: 100%; Cursor: pointer;}. Bg {founale:#00ff21;}JS -код:
/// <reference path = "_ referenctions.js"/> var i = 0; // Глобальная переменная // Определить переменную для получения процесса Carousel var time; $ (function () {// 1. После загрузки страницы, найдите первый объект с классом, равным Swapimg и дайте его отображение. $ (". Swapimg"). EQ (0) .show (). // Как остановиться после того, как мышь включена? -1 (i == 0) {i = 6; function show () {//$("#allswapimg").hover(function () // {// $ (". Btn"). Show (); //}, function () // {// $ (". Btn"). Hide (); //}); // Fadein (300) исчезает, Fadeout (300) исчезает, время фильтрации 0,3 с. $ (". Tab"). EQ (i) .AdClass ("bg"). Siblands (). removeClass ("bg");} функция Showtime () {time = setInterval (function () {i ++; if (i == 6) {// Есть только 6 картин, поэтому я не могу превзойти 6. Если я равен 6, мы будем делать это равное значение, что я могу показать, что я буду равный картин. }, 3000);}Приведенный выше пример простого реализации эффекта изображений каруселей - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.