Contém 3 arquivos: html, slider-H5.js, jquery.js. Os parâmetros deslizantes podem ser configurados em HTML. O código específico é o seguinte:
Código HTML:
<!DOCTYPE HTML><html> <head> <meta charset=utf-8 /> <meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1 /> <meta name=viewport content=width = largura do dispositivo, densidade alvo dpi = alto dpi, escala inicial = 1,0, escala máxima = 1,0, escalonável pelo usuário = não /> <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> Deslize o dedo H5 para trocar as imagens</title> <style> ul,li{margin:0;padding:0; } @media screen e (min-width:240px) { html, body{ font-size:9px } } @media screen e (min-width:320px) { html, body{ font-size:12px; tela e (largura mínima: 480px) { html, corpo{ tamanho da fonte: 18px } } @media tela e (largura mínima: 640px) { html, corpo {tamanho da fonte: 24px } } @media tela e (largura mínima: 960px) { html, corpo {tamanho da fonte: 36px } } div.imgbox {largura: 25rem;altura:16,5rem;estouro:oculto;margem:0 automático;} div.imgbox ul{claro:ambos;largura:75rem;display: bloco embutido;} div.imgbox ul li{float:esquerda;largura:25rem;altura:16,5rem;overflow:oculto;alinhamento de texto:centro;} div.imgbox ul li img{largura:24rem;altura:16,5rem;} #page{cor:vermelho;} </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> Aqui o valor atual é exibido por meio de retorno de chamada Para quantas páginas rolar: <span id=page> 0 </span> </div> <script src=jquery-1.10.2yuan.js> </script> <script src=slider-H5.js> </script> <script> (function() { /* Nota: no objeto scrollImg retornado por $. mggScrollImg Existem três métodos: next, prev e go, que podem realizar o controle externo do índice de rolagem. Por exemplo: scrollImg.next();//mudará para a próxima imagem scrollImg.go(0);//mudará para a primeira imagem*/ var scrollImg = $.mggScrollImg('.imgbox ul', { loop : true, //Troca de ciclo automática: true, //Troca automática auto_wait_time: 3000, //Intervalo do carrossel scroll_time: 300, //Retorno de chamada de duração da rolagem: function(ind) { //O que é passado aqui é o valor do índice $('#page').text(ind + 1 });Código slider-H5.js:
(function($) { /* Efeito de rolagem de imagem @jQuery ou @String box: lista de rolagem objeto jQuery ou seletor como: o elemento de rolagem é a camada externa de li ul @object config: { @Number width: uma largura de rolagem, o padrão é a largura do elemento filho de primeiro nível na caixa [se a largura dos elementos filhos for irregular, o efeito de rolagem será desordenado] @Number size: Comprimento da lista, o padrão é o número de todos os subelementos de primeiro nível na caixa [se o tamanho não for igual ao número de subelementos de primeiro nível, a rolagem circular não é suportada] Loop @Boolean: se deve suportar rolagem circular , padrão verdadeiro @Boolean auto: se deve rolar automaticamente. Ao suportar a rolagem automática, a rolagem circular deve ser suportada, caso contrário, a configuração é inválida @Number auto_wait_time: O intervalo de tempo para rotação automática, o padrão é: 3000ms @. Retorno de chamada de função: Após a rolagem, a função de retorno de chamada insere um parâmetro: o valor do índice do nó de rolagem atual} */ function mggScrollImg(box, config) { this.box = $(box); {}) ; this.width = this.config.width || this.box.children().eq(0).width(); this.box.children().length; this.loop = this.config.loop !== indefinido (this.config.loop == true ? true: false) : true; loop e scroll = this.config.auto !== indefinido ? (this.config.auto == true ? true: false) : true; //Rolagem automática por padrão this.auto_wait_time = this.config.auto_wait_time || 3000; //Intervalo do carrossel this.scroll_time = this.config.scroll_time !== indefinido ? (this.config.scroll_time > 0 ? this.config.scroll_time: 0): 300; .width * (this.size - 1); //Valor mínimo à esquerda, observe que é um número negativo [valor sem loop] this.maxleft = 0; //Valor lfet máximo [valor sem loop] this.now_left = 0; //Informação de posição inicial [valor sem loop] this.point_x = null; coordenar this.move_left = false; //Registrar para que lado deslizar this.index = 0; $.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; { var t = e.touches ? e.touches: e.originalEvent.targetTouches se (t.length == 1 && !self.busy) { return self.move(t[0].screenX, t[0].screenY); //Aqui decidimos se bloquearemos o evento de toque padrão com base no valor de retorno} }).bind('touchend', function(e) { ! self.busy && self.move_end() }); /* Inicializar a rolagem circular. Quando vários subelementos precisam ser rolados ao mesmo tempo, o efeito de rolagem circular ainda não é suportado. Se você deseja obter o efeito de rolar vários elementos filhos ao mesmo tempo, você pode implementar a ideia de rolagem em loop através da estrutura da página: copie o primeiro e o último nó para o final*/ init_loop: function() { if (this.box .children().length > 1 && this. box.children().length == this.size && this.loop) { // Atualmente só suporta loops quando o tamanho e o número de nós filhos são iguais this.now_left = - this.width; //Defina as informações da posição inicial this.minleft = -this.width * this.size; //Valor mínimo esquerdo this.maxleft = -this.width; this.box.prepend(this.box.children().eq(this.size - 1).clone()).append(this. box.children().eq(1).clone()).css(this.get_style(2)); this.box.css('largura', esta.largura * (este.tamanho + 2)); } else { this.loop = false; this.box.css('width', this.width * this.size); if (!self.auto) return; clearTimeout(self.timer); self.auto_wait_time); }, go_index: function(ind) { //Rola para a página de índice especificada var self = this; self .loop) { //Se loop ind = ind < 0 ? 0 : ind; ind = ind >= self.size ? (self.size - 1) : ind; if (!self.loop && (self.now_left == -(self.width * ind))) { self. complete(ind); == -1 || ind == self.size) { //Limite de rolagem do loop self.index == -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); //retorno de chamada de conclusão da animação var self = this; self.config.callback && self.config.callback(self.index); self.minleft; } else if (ind == self.size) { self.now_left = self.maxleft; } self.box.css(this.get_style(2)); () { //Rola a próxima página if (!this.busy) { this.go_index(this.index + 1 } }, prev: function() { //Rola a página anterior if (!this.busy) { this.go_index(this.index - 1); }, move: function(point_x, point_y) { //Função de processamento da tela deslizante var changeX = point_x - (this.point_x === null ? point_x: this.point_x), changeY = point_y - (this.point_y === nulo? point_y: this.point_y), marginleft = this.now_left, return_value = false, sin = changeY / Math.sqrt(changeX * changeX + changeY * changeY); this.now_left = marginleft + changeX = changeX < 0; | sin < -Math.sin(Math.PI / 3)) { //Faixa de ângulo da tela de rolagem: PI/3 -- 2PI/3 return_value = true; this.point_x = point_x; this.point_y = point_y; this.box.css(this.get_style(2)); if (this.now_left < this.minleft) { //Deslize o dedo para a esquerda ind = this.index + 1 } else if (this.now_left > this.maxleft) { //Deslize o dedo para a direita ind = this.index - 1 } else if (changeX != 0) { if (this.move_left) { //Deslize o dedo para a esquerda ind = this. index + 1; } else { //Deslize o dedo para a direita ind = this.index - 1; ;}, /* Obtenha o estilo de animação. Para ser compatível com mais navegadores, você pode estender este método @int fig: 1 animação 2 sem animação*/ get_style: function(fig) { var x = this.now_left, time = fig == 1 ?este .scroll_time: 0; return { '-webkit-transition': '-webkit-transform ' + time + 'ms', '-webkit-transform': 'translate3d(' + x + 'px,0,0)', '-webkit-backface-visibility': 'oculto', 'transição': 'transformar' + tempo + 'ms', 'transformar': 'translate3d(' + x + 'px, 0,0)' }; } }); /* Isto fornece uma interface de chamada externa e um método de interface externa next: next page prev: previous page go: scroll to the specific page*/ $.mggScrollImg = function(box, config) { var scrollImg = new mggScrollImg(box, config); return { //Fornece interface externa next: function() { scrollImg.next() }, prev: function() { scrollImg .prev(); }, vá: function(ind) { scrollImg.go_index(parseInt(ind) || 0); }})(jQuery)O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.