1. Flash Carousel
Независимо от описания, реализация относительно проста, а эффект лучше
2. скольжение карусели
Примером является следующий HTML -код (пройдите влево)
<div style = "overflow: hidden; width: 266px;"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div>
Исходный код плагина: реализуйте вращение левой и вверх, ручное переключение также остается и переключение вверх (ручное переключение исходного кода ключа)
var all = $ panel.find ('> li'), purvall = new Array (); prevall [0] = all.eq (0); // Сохранить все узлы перед целевым узлом в Prevall, и после окончания анимации эти узлы добавляются в заднюю часть контейнера один на один по порядку (var i = 1; i <len; i ++) {all. 'никто'}); prevall [i] = all.eq (i);} ... $ panel.animate ({'marginleft': -options.width+'px'}, опции. Отображать узел до последнего} $ daning.css ({marginleft: 0});})Есть два основных способа внедрения скользящих каруселей
1) Переключить родительский элемент-поле левой и непрерывно добавить первый дочерний элемент в конце родительского контейнера
Простая реализация
var $ panel = $ ('example'); var scrolltimer = setInterval (function () {scrollnews ($ panel);}, 3000); function $ scrollnews () {$ panel.animate ({'marginleft': '-266px'}, 500, функция () {$ panelf }). Найти ('> li: First'). Appendto ($ panel);Одна проблема с этим подходом заключается в том, что могут возникнуть проблемы с совместимостью в старых IES.
2) Установите леблетчатые левые элементы в методе накопления
Однако, когда левая маржи установлена на минимум (скольжение к последнему элементу), установите положение первого дочернего элемента на заднюю часть последнего дочернего элемента. Когда последний элемент прокручивается до первого элемента, левчатый левый маржинальный элемент устанавливается на 0, а положение первого дочернего элемента возвращается. Приведите простой пример кода
var $ panel = $ ('. Пример'), index = 0; var scrolltimer = setInterval (function () {scrollnews ($ panel);}, 3000); function scrollnews () {if (++ index> = 2) {$ panel.css ({'paddingleft': 266+'px'}) $ panel. «позиция»: «абсолют», «слева»: 266*index + 'px'}); } $ panel.animate ({'marginleft': -266*index+'px'}, 500, function () {if (++ index> 3) {$ panel.css ({marginleft: 0});} if (index> = 3) {index = 0; $ panel.csssss ({marginleft: 0, 'caddid'); $ panel.find ('> li: First'). CSS ({'Position': 'static', 'Left': 'Auto'});Более сложные плагины прокрутки должны поддерживать горизонтальную и вертикальную прокрутку (четыре направления), могут вручную переключать фокус и могут появляться и вниз. Прикрепите полный исходный код плагина, который я написал
Плагин исходный код jquery.nfdscroll.js: поддерживает горизонтальную и вертикальную прокрутку (четыре направления). Ручное переключение прокрутит направление переключения.
/** * @author 'Chen Hua' * @Date '2016-5-10' * @Description Slind Carousel Plug-индекс, поддерживает горизонтальный и вертикальный скольжение Carousel * * @Example html: <div> <!-Scroll Content ul-> <ul> <li> <a href = "XXX" = "_ rluck"> <ul> <li> <li> <a href = "XXX" = " href = "xxx" target = "_ blank"> </a> </li> <li> <a href = "xxx" target = "_ blank"> </a> </li> <li> <a href = "xxx" target = "_ blank"> </a> </li> </ul> <!-Фокус, список, не обязательно <li> </li> <li> </li> <li> </li> </ol> <!-предыдущий и следующий, необязательный-> <div> <a href = "javascript: void (0);"> </a> <a href = "javascript: void (0);"> </a> </div> </div> js: $ (. startIndex: 0, ширина: '266', высота: '216', интервал: 2000, выбран: 'circle', prevtext: '', nextext: '', deriction: 'left', callback: function (index, $ currentNode) {console.log (index)}}); * @param startIndex {Number} Scrolling from the number of scrolling elements by default, optional (0-n,0 means the first one, default is 0) * @param width {Number} Scrolling element width, optional (when the width is 0 means no width is set) * @param height {Number} Scrolling element height, optional (when the height is 0 means no height is set) * @param interval {Number} Время интервала, единица Milliseconds, когда значение отрицательное, автоматическая прокрутка прокрутки не выполняется * @param duration {number} duration * @param selected {string} scroll toggle small incon (focus focus) current * @param deriction {string} Прокрутите направление, поддерживающее левое и правое и внизу. скользящая анимация, параметры (индекс, $ currentNode), индекс: индекс узла, отображаемый после карусели; CurrentNode: объект jQuery узла, который в настоящее время отображается после карусели * @param prevtext {string} текст предыдущей кнопки, по умолчанию «предыдущий» * @param stextext {string} Текст следующего кнопки, по умолчанию «Next» */ jQuery.fn.extend ({nfdscrol 0, // Ширина элемента прокрутки, необязательная (когда ширина равен 0 означает, что ширина не установлена) Высота: 0, // высота прокрутки элемента, необязательная (когда высота равен 0 означает, что высота не установлена) Интервал: 1000, // Время интервала. deriction: «слева», // обратный вызов направления прокрутки: function (index, $ currentNode) {// триггер сразу после прокрутки к новому узлу, CurrentNode является объектом jQuery отображаемого в настоящее время узела}}, $ this = this, $ panel = $ this.find ('> ul'), // scroll wanellist = $ panel.find ('> ul'), $ stormits $ '), $ selement'), $ select '), $'). $ this.find ('> ol> li'), // select container options = jquery.extend (defaultopt, options), animatefn, // анимация прокрутки max = $ panel.find ("> li"). Длина, // Количество узлов для прокрутки FocusIndex = 0, // Индекс в настоящее время ndfdscrollie Неверно, // Никакие другие анимации не отвечают во время процесса анимации isWaiting = false, // Есть ли какой-либо неожиданный индекс ожидания ожидания; // Целевой индекс неожиданной анимации $ ('. Nfdscroll-prev'). Текст (опции. Prevtext); if ($ panellist.length <= 1) {return; STOPSCROLL (); }, options.Interval); ClearInterval (nfdscrolltimer); }} if (toindex! = FocusIndex) {inanimation = true; «Абсолют», «слева»: опции.width*toindex + 'px'}); 'px'}); 'PX'}, Options.Duration, function () {FocusIndex = tind; 0) {// $ panel.css ({'marginleft': -Options.width*FocusIndex + 'px', 'paddingleft': 0}); inanimation = false; Focusindex) {inanimation = true; }); toindex; if (toindex> = max) {$ panel.css ({margintop: 0, 'paddingtop': 0}); «Margintop»: -Options.height*Focusindex + 'px', 'paddingtop': 0}); })}} function bindevent () {// vinding event $ this.on ('mouseover', function () {stopscroll ();}). On ('mouseout', function () {Startscroll ();}). On ('click', '.nfdscroll -prev', function () {stopscroll (); }). On ('click', '.nfdscroll-next', function () {stopscroll (); StartsCroll (FocusIndex + 1);}) $ selectList.on ('mouseOver', function () {stopscroll (); if (! $ (this) .is (' init () {$ this.css ({позиция: «относительно», переполнение: 'hidden'}); Options.Dection == 'right') {// Инициализируйте стиль, на самом деле стиль не должен быть сделан в подключателе. CSSO.Height = Options.Height; == 'top' ||. $ panel.find ('> li'). CSS (CSSO) .length; левый/правый/внизу ');Полный пример
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Пример теста карусели </title> <style type = "text/css"> Body, ul, ol {margin: 0; Padding: 0;} ul, ol {list-style: none;} .li1 {founal-color: #000;} .li2 {founal-color: #333;} .li3 {founal-color: #666;} .li4 {foine-color: #999;} .example {margin-left: 300px; Лебь накладки: 80px; Ширина: 186px; Высота: 20px; Верх: 186px; слева: 0px; Фон: #fff; курсор: указатель; } ol li {float: left; Ширина: 10px; Высота: 10px; Маржа: 5px; Фон: #ff0; граница радий: 10px; } ol li.circle {founale: #f00; } </style> </head> <body> <div> <!-Содержание прокрутки ul-> <ul> <li> <a href = "xxx" target = "_ blank"> </a> </li> <li> <a href = "xxx" target = "_ blank"> </a> </li> <li> <href = "xxx" _able "> </li> <li> <href =" xxx "> <li> <a href = "xxx" target = "_ blank"> </a> </li> </ul> <!-Список фокуса, необязательно-> <ol> <li> </li> <li> </li> <li> </li> <li> </li> </li> </ol> <! href = "javascript: void (0);"> </a> <a href = "javascript: void (0);"> </a> </div> </div> <script type = "text/javascript" src = "common/jquery.js"> </script> <script type = "javascript" src = "common/jquery.nfdscroll.js"> </script> <script type = "text/javascript"> $ ('. Пример'). nfdscroll ({startindex: 0, width: '266', высота: '216', интервал: -1, // 2000, выбираемый Callback: function (index, $ currentNode) {console.log (index)}}); </script> </body> </html>Эффекты достигнуты
Вручную отрегулируйте стили OL, NFDScroll-Prev и т. Д.
Простой метод реализации вышеуказанного карусели - это весь контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.