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> <div> <img src = "Image/6.jpg"/> </div> </div> <div> <</div> <div >> </div> <div id = "tabs"> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> </div> </body> </html>
CSS -код:
* {padding: 0px; margin: 0px;}. Swapimg {position: Absolute;}. Btn {положение: Absolute; Height: 90px; ширина: 60px; фон: Rgba (0,0,0,0,5);/* Установить фоновый цвет на черный 50%*/color: #ffffff; text-align: center; line-hight: 90px; font-size: 40px; top: 155px;/*Высота изображения 400/2-45*/cursor: pointer;/*Дисплей: нет;*/}. Btnright {слева: 840px;/*Вид. {позиция: Absolute; Top: 370px; Margin-left: 350px;}. Tab {Высота: 20px; ширина: 20px; фон:#05e9e2; line-hight: 20px; текстовый Align: Center; Font-Size: 10px; float: left; цвет: #ffffff; argin-right: 10px; граница-радис: 100%; cursor: pointer;}.JS -код:
/// <reference path = "_ ссылки. $ (". Swapimg"). EQ (0) .show (). $ (this) .index (); show (); // Как остановиться после того, как мышь включен? clearInterval (время); // после щелчка, -1if (i == 0) {i = 6;} i -; show (); showtime ();}); $ (". Btnright"). Click (function () {// 1. Перед щелчком, вам нужно остановить Carousel Clearinterval (Time); -1;} i ++; show (); showtime ();});}); function show () {//$("#allswapimg").hover(function () // {// $ (". Btn"). Show (); //}, function () // {// $ (". Btn") В, Fadeout (300) исчезает, время фильтрации 0,3S $ (".. Swapimg"). EQ (i) .fadein (300) .siblings (). Fadeout (); $ (". Tab"). EQ (i) .AdDclass ("bg"). setInterval (function () {i ++; if (i == 6) {// Есть только 6 изображений, поэтому я не могу превышать 6. Если я равен 6, мы сделаем его равным первым изображениям i = 0;} show ();}, 3000);}Выше приведено код реализации диаграммы карусели на основе JavaScript, представленной вам. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!