Содержит 3 файла: html, слайдер-H5.js, jquery.js. Параметры скольжения можно настроить в html. Конкретный код выглядит следующим образом:
HTML-код:
<!DOCTYPE HTML><html> <head> <meta charset=utf-8 /> <meta http-equiv=X-UA-совместимое содержимое=IE=edge,chrome=1 /> <meta name=viewport content=width = ширина устройства, целевая плотностьdpi = высокое разрешение, начальный масштаб = 1,0, максимальный масштаб = 1,0, масштабируемый пользователем = нет /> <meta name=apple-mobile-web-app-capable content=yes /> <meta name=apple-mobile-web-app-status-bar-style content=black /> <meta content=telephone=no name=format-detection /> <meta name=keywords content=seokeywords /> <meta name=description content=seodescription /> <title> Слайд H5 для переключения изображений</title> <style> ul,li{margin:0;padding:0; } @media screen and (min-width:240px) { html, body{font-size:9px; } } @media screen and (min-width:320px) { html, body{font-size:12px; } } @media; экран и (минимальная ширина: 480 пикселей) { html, body { размер шрифта: 18 пикселей } } @media screen и; (минимальная ширина: 640 пикселей) { html, body { размер шрифта: 24 пикселей } } @media screen и (минимальная ширина: 960 пикселей) { html, body { размер шрифта: 36 пикселей } } div.imgbox {width: 25rem;высота:16,5rem;переполнение:скрыто;поле:0 авто;} div.imgbox ul{clear:both;width:75rem;display: inline-block;} div.imgbox ul li{float:left;width:25rem;height:16.5rem;overflow:hidden;text-align:center;} div.imgbox ul li img{ширина:24рем;высота:16,5рем;} #page{color:red;} </style> </head> <body> <div class=imgbox> <ul> <li> <a href=#> <img src=http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f3d8533e.jpg> < /img> </a> </li> <li> <a href=#> <img src=http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f23aad06.jpg> </img> </a> </li> <li> <a href=#> <img src=http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f345282b.jpg> </img> </a> </li> </ul> </div> <div> Здесь текущее значение отображается через обратный вызов. Сколько страниц нужно прокрутить: <span id=page> 0 </span> </div> <script src=jquery-1.10.2yuan.js> </script> <script src=slider-H5.js> </script> <script> (function() { /* Примечание: для объекта ScrollImg, возвращаемого $. mggScrollImg Существует три метода: next, prev и go, которые могут реализовать внешнее управление индексом прокрутки. Например: ScrollImg.next();//переключимся на следующую картинку ScrollImg.go(0);//переключимся на первую картинку*/ var ScrollImg = $.mggScrollImg('.imgbox ul', {loop: true, //Переключение цикла auto: true, //Автоматическое переключение auto_wait_time: 3000, //Интервал карусели Scroll_time: 300, //Обратный вызов длительности прокрутки: function(ind) { //Здесь передается значение индекса $('#page').text(ind + } })() </script> </body></html>;Код слайдера-H5.js:
(function($) { /* Эффект прокрутки изображения @jQuery или @String box: прокручиваемый список Объект jQuery или селектор, например: элемент прокрутки является внешним слоем li ul @object config: { @Number width: одна ширина прокрутки, по умолчанию — ширина дочернего элемента первого уровня в поле [если ширина дочерних элементов неравномерна, эффект прокрутки будет неупорядоченным] @Number size: Длина списка, по умолчанию равна количеству всех подэлементов первого уровня в поле [если размер не равен количеству подэлементов первого уровня, круговая прокрутка не поддерживается] @Boolean цикл: поддерживать ли круговую прокрутку , по умолчанию true @Boolean auto: следует ли выполнять автоматическую прокрутку. При поддержке автоматической прокрутки должна поддерживаться круговая прокрутка, в противном случае настройка недействительна. @Number auto_wait_time: временной интервал для автоматического вращения, значение по умолчанию: 3000 мс @. Обратный вызов функции: После прокрутки функция обратного вызова вводит параметр: текущее значение индекса узла прокрутки} */ function mggScrollImg(box, config) { this.box = $(box); this.config = $.extend({}, config || {}) ; this.width = this.config.width || this.box.children().eq(0).width(); //Ширина одной прокрутки this.size = this.config.size || this.box.children().length; this.loop = this.config.loop !== undefined ? (this.config.loop == true ? true: false) : true; //По умолчанию this.auto может; цикл и прокрутка = this.config.auto !== undefined ? (this.config.auto == true ? true: false) : true; //Автоматическая прокрутка по умолчанию this.auto_wait_time = this.config.auto_wait_time || 3000; //Интервал карусели this.scroll_time = this.config.scroll_time !== undefined ? (this.config.scroll_time > 0 ? this.config.scroll_time: 0) : 300 //Продолжительность прокрутки this.minleft = - this .width * (this.size - 1); //Минимальное левое значение, обратите внимание, что это отрицательное число [значение без цикла] this.maxleft = 0; //Максимальное значение lfet [значение без цикла] this.now_left = 0; //Информация о начальной позиции [значение без цикла] this.point_x = null; //Запись координаты x this.point_y = null; //Запись y; координата this.move_left = false; //Запишите, в какую сторону скользить this.index = 0; this.busy = false; this.init(); $.extend(mggScrollImg.prototype, { init: function() { this.bind_event(); this.init_loop(); this.auto_scroll(); },bind_event: function() { var self = this; self.box. bind('touchstart', function(e) { var t = e.touches ? e.touches: e.originalEvent.targetTouches; if (t.length == 1 && !self.busy) { self.point_x = t[0].screenX; self.point_y = t[0].screenY; }).bind('touchmove', function(e) { var t = e.touches ? e.touches: e.originalEvent.targetTouches; if (t.length == 1 && !self.busy) { return self.move(t[0].screenX, t[0].screenY); //Здесь мы решаем, блокировать ли событие касания по умолчанию на основе возвращаемого значения} }).bind('touchend', function(e) { ! self.busy && self.move_end(); }); /* Инициализация круговой прокрутки. Когда необходимо прокрутить несколько подэлементов, эффект круговой прокрутки пока не поддерживается. Если вы хотите добиться эффекта прокрутки нескольких дочерних элементов одновременно, вы можете реализовать идею циклической прокрутки по структуре страницы: скопируйте первый и последний узлы в конец*/ init_loop: function() { if (this.box .children().length > 1 && this. box.children().length == this.size && this.loop) { // В настоящее время циклы поддерживаются только тогда, когда размер и количество дочерних узлов равны this.now_left = - this.width; //Устанавливаем информацию о начальной позиции this.minleft = -this.width * this.size; //Минимальное левое значение this.maxleft = -this.width; this.box.prepend(this.box.children().eq(this.size - 1).clone()).append(this.size; box.children().eq(1).clone()).css(this.get_style(2)); this.box.css('width', this.width * (this.size + 2)); } else { this.loop = false; this.box.css('width', this.width * this.size); } }, auto_scroll: function() { //Автопрокрутка var self = this; if (!self.auto) return;clearTimeout(self.timer); self.timer = setTimeout(function() { self.go_index(self.index + 1); }, self.auto_wait_time); }, go_index: function(ind) { //Прокрутка до указанной индексной страницы var self = this; if (self.busy) return;clearTimeout(self.busy = true; self .loop) { //If цикл ind = ind < 0 ? -1 : ind; ind > self.size ? self.size: ind; 0 : ind; ind = ind >= self.size ? (self.size - 1) : ind; if (!self.loop && (self.now_left == -(self.width * ind))) { self. Complete(ind); } else if (self.loop && (self.now_left == -self.width * (ind + 1))) { self.complete(ind } else { if (ind); == -1 || ind == self.size) { //Цикл прокрутки границы self.index = ind == -1 ? (self.size - 1) : 0; self.now_left = ind == -1 ? : -self.width * (self.size + 1); } else { self.index = ind; self.now_left = -(self.width * (self.index + (self.loop ? 1: 0))); } self.box.css(this.get_style(1)); setTimeout(function() { self.complete(ind); }, self.scroll_time); //Обратный вызов завершения анимации var self = this; self.busy = false; self.config.callback && self.config.callback(self.index); if (ind == -1) { self.now_left = self.minleft; } else if (ind == self.size) { self.now_left = self.maxleft; } self.box.css(this.get_style(2)); далее: функция () { //Прокручиваем следующую страницу if (!this.busy) { this.go_index(this.index + } }, prev: function() { //Прокручиваем предыдущую страницу if); (!this.busy) { this.go_index(this.index - 1); } }, move: function(point_x, point_y) { //Функция обработки скользящего экрана varchangeX = point_x - (this.point_x === null ? point_x: this.point_x),changeY = point_y - (this.point_y === null ? point_y: this.point_y), поля слева = this.now_left, return_value = false, sin =changeY/Math.sqrt(changeX * ChangeX + ChangeY * ChangeY); this.now_left = Marginleft + ChangeX; this.move_left = ChangeX <0; если (sin > Math.sin(Math.PI/3) | | sin < -Math.sin(Math.PI / 3)) { // Диапазон углов прокрутки экрана: PI/3 -- 2PI/3 return_value = true; // Не предотвращает поведение по умолчанию} this.point_x = point_x; if (this.now_left < this.minleft) { //Проведите пальцем влево ind = this.index + 1 } else if (this.now_left > this.maxleft) { //Проведите пальцем вправо ind = this.index - 1 } else if (changeX != 0) { if (this.move_left) { //Проведите пальцем влево ind = this. index + 1; } else { // Проведите пальцем вправо ind = this.index - 1; } else { ind = this.index; } this.point_x = this.point_y = this.go_index(ind); ; }, /* Получаем стиль анимации. Чтобы обеспечить совместимость с другими браузерами, вы можете расширить этот метод @int fig: 1 анимация 2 без анимации*/ get_style: function(fig) { var x = this.now_left, time = fig == 1 ? это .scroll_time: 0; return { '-webkit-transition': '-webkit-transform' + time + 'ms', '-webkit-transform': 'translate3d(' + x + 'px,0,0)', '-webkit-backface-visibility': 'скрытый', 'переход': 'transform' + time + 'ms', 'transform': 'translate3d(' + x + 'px, 0,0)' }; } }); /* Предоставляет интерфейс внешнего вызова и метод внешнего интерфейса next: следующая страница prev: предыдущая страница перейти: прокрутить до указанной страницы*/ $.mggScrollImg = function(box, config) { var ScrollImg = new mggScrollImg(box, config); return { //Предоставляем внешний интерфейс next: function() { ScrollImg.next() }, prev: function() { ScrollImg; .prev(); }, go: function(ind) { ScrollImg.go_index(parseInt(ind) || 0); }})(jQuery)Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.