Сначала на простой карусельной схеме для всех, чтобы увидеть эффект:
1, анализ Carousel Рисунок принципы: 1) Принцип пять Carousel Рисунок 6 является использование изображений как карусель, первый и последний один простой интеграции, предоставляя пользователям лучший опыт эффект
2) Когда изображения транслируют на револьвере, где изображение перемещается вправо, таким же образом, когда изображение в нужное положение карусели, когда изображение перемещается влево
3) Когда карусель до последнего , когда нам нужно быстро переключиться на первую 
2, осуществление процесса: нажмите событие, автоматически повернет событие, и переключить дисплей указателя
Нажмите на события, включая области визуального отображения, нажмите кнопку и кнопку ясно, автоматический таймер карусельного исчезает после снятия области просмотра, и автоматически вращать, и нажмите левую кнопку событие щелчка, и нажмите на маленькую точку ниже фотографии переключения события.
Автоматическое событие карусели автоматически воспроизводит без интерактивных изображений, карусельные по умолчанию вправо, установите таймер воспроизведение с помощью функции перемещения.
Когда событие является изменение индекса дисплей показывает текущее изображение будет показывать текущую точку индекса, и он становится красным
3, для достижения
1, HTML и CSS стили простой точки
В HTML тело выглядит следующим образом:
<DIV класс = "обертка">
<Ул класс = «ГИМ»>
<Li> <IMG SRC = "./ IMG / 1.jpg" альт = ""> </ li>
<Литий> <IMG SRC = "./ IMG / 2.jpg" ALT = ""> </ LI>
<Литий> <IMG SRC = "./ IMG / 3.jpg" ALT = ""> </ LI>
<Литий> <IMG SRC = "./ IMG / 4.jpg" ALT = ""> </ LI>
<Литий> <IMG SRC = "./ IMG / 5.jpg" ALT = ""> </ LI>
<Li> <IMG SRC = "./ IMG / 1.jpg" альт = ""> </ li>
</ UL>
<DIV класс = "БТН leftBtn"> & LT; </ DIV>
<DIV класс = "БТН rightBtn"> & GT; </ DIV>
<Ул класс = «точка»>
<Li> 0 </ li>
<Литий> 1 </ LI>
<Литий> 2 </ LI>
<Литий> 3 </ LI>
<Литий> 4 </ LI>
</ UL>
</ DIV>
<Сценарий SRC = "./ JS / JQuery-3.3.1.js"> </ скрипт>
<Сценарий SRC = "./ JS / demo.js"> </ скрипт>
стиль CSS:
* {
Маржа: 0px;
обивка: 0px;
список-стиль: нет;
}
.wrapper {
позиция: относительная;
ширина: 400px;
Высота: 350 пикселей;
границы: 1px твердый #eee;
Маржа: 100px авто;
переполнение: скрытый; // установить скрытую, потому что это позиция .imgs, из области просмотра сделает его невидимым
}
.wrapper .imgs {
позиция: абсолютная;
Слева направо: 0px;
ширина: 2400px;
Высота: 350 пикселей;
Размер шрифта: 0px;
}
.wrapper .imgs Li {
отображать: встроенный блок; / * на уровне строк между элементами блока имеет вкладку отступ, размер шрифт значения размера * /
ширина: 400px;
Высота: 350 пикселей;
}
.wrapper .imgs Li IMG {
ширина: 100%;
высота: 100%;
}
.btn {
ширина: 40px;
высота: 30px;
позиция: абсолютная;
наверх: 50%;
Запас-топ: -15px;
фон: желтый;
Непрозрачность: 0,4;
выравнивания текста: центр;
высота строки: 30px;
не отображать: нет; // инициализируется нет, удобство при наведении курсора события показывают функцию первоначального отображения.
}
.leftBtn {
Слева направо: 0px;
}
.rightBtn {
право: 0px;
}
/ * .Wrapper .rings {
ширина: 100%;
позиция: абсолютная;
внизу: 30px;
выравнивания текста: центр;
} * /
.wrapper .dot {
позиция: абсолютная;
внизу: 30px;
слева: 50%;
Левое поле: -65px;
ширина: 130px;
высота: 20px;
выравнивания текста: центр;
}
.wrapper .dot Li {
плыть налево;
ширина: 20px;
высота: 20px;
границы радиус: 50%;
фон: #fff;
Размер шрифта: 0px; // текст исчезает Ли
Левое поле: 4px;
}
Реализация JQuery:
// нажмите клики события до и после двигающейся карусели фотографии до и после
// автоматически переместить событие не нажмите событие для автоматического поворота изображений
// изменить значение индекса события
был nowIndex = 0;
был часы = нуль,
Num = $ ( 'ГИМ Li') длина -. 1,
Len = $ ( 'ГИМ Li'). ширину (),
Блокировка = True;
// console.log (число, с);
Функция инициализации () {// инициализации () инициализации функции, в зависимости от функции входа
Объем Event ();
доступа ();
changeIndex ();
}
в этом();
Volume Функция Event () {
$ ( 'Обертка'). Hover (функция () {// съехал событие мыши
$ ( 'БТН') показывают ().
clearInterval (таймер);
}, Функция () {
$ ( 'БТН') скрыть ().
доступа ();
})
$ ( 'Обертка '). На ( 'нажмите''. БТН', функция () {// нажатие кнопки событие, о
если ($ (это) .hasClass ( 'leftBtn')) {
перейти ( 'пред');
} Еще если ($ (это) .hasClass ( 'rightBtn')) {
двигаться ( 'следующий');
}
})
$ ( 'Dot'). В ( 'нажмите', 'ли', функция () {// значение индекса события щелчка
Индекс переменного = $ (это) .index ();
// console.log (индекс)
двигаться (индекс);
})
}
Функция шаг (реж) {
если (блокировка) {// установить блокировку для предотвращения конфликтов автоматически вращать и нажмите кнопку происходит событие, положение на экране изображения изменяется
Блокировка = FALSE;
если (реж == 'пред') {
если (nowIndex == 0) {
nowIndex = а;
$ ( 'ГИМ.') Css ( 'левый', -nowIndex * LEN) ;. // Когда изображение на крайнем левом, картина позиции обратно в -nowIndex * Len
}
nowIndex -;
$ ( 'ГИМ') Animate ({ 'левый': -nowIndex * Len}., 1000, функция () {// установить анимацию мутант
changeIndex ();
Блокировка = True;
});
} Еще если (реж == 'следующий') {
если (nowIndex == Num) {
nowIndex = 0;
$ ( 'ГИМ.') Css ( 'левый', -nowIndex * LEN) ;. // То же самое верно
}
nowIndex ++;
. $ ( 'ГИМ ') одушевленные ({' левый': -nowIndex * Len}, 1000, функция () {
changeIndex ();
Блокировка = True;
});
} Еще {
nowIndex = каталог;
. $ ( 'ГИМ ') одушевленные ({' левый': -nowIndex * Len}, 400, функция () {
changeIndex ();
Блокировка = True;
});
}
}
}
Функция changeIndex () {
$ ( 'Точка Ли.) CSS (' фон', '# FFF').
если (nowIndex == Num) {// значение индекса 0--4
$ ( 'Точка Ли.) Экв (0) .css (' фон', '# f40').
} Еще {
$ ( 'Точка Ли. ') Уравнение (nowIndex) .css (' фон', '# F40.');
}
}
Функция autoMove () {
если (блокировка) {
clearInterval (таймер);
Таймер = setInterval (функция () {
двигаться ( 'следующий');
}, 2000);
}
}
Небольшая карусельная фигура показывает эффект:
Я надеюсь, что у нас есть хорошая идея отделки под землей, чтобы выиграть карусельную карту.
