Contains 3 files: html, slider-H5.js, jquery.js. Sliding parameters can be configured in html. The specific code is as follows:
HTML code:
<!DOCTYPE HTML><html> <head> <meta charset=utf-8 /> <meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1 /> <meta name=viewport content=width =device-width, target-densitydpi=high-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=no /> <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 finger slide to switch pictures</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 screen and (min-width:480px) { html, body{ font-size:18px; } } @media screen and (min-width:640px) { html, body{ font-size:24px; } } @media screen and (min-width:960px) { html, body{ font-size:36px; } } div.imgbox{width: 25rem;height:16.5rem;overflow:hidden;margin:0 auto;} 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{width:24rem;height:16.5rem;} #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> Here the current value is displayed through callback How many pages to scroll to: <span id=page> 0 </span> </div> <script src=jquery-1.10.2yuan.js> </script> <script src=slider-H5.js> </script> <script> (function() { /* Note: on the scrollImg object returned by $.mggScrollImg There are three methods: next, prev, and go, which can realize external control of the scrolling index. For example: scrollImg.next();//will switch to the next picture scrollImg.go(0);//will switch to the first picture*/ var scrollImg = $.mggScrollImg('.imgbox ul', { loop : true, //Cycle switching auto: true, //Automatic switching auto_wait_time: 3000, //Carousel interval scroll_time: 300, //Scroll duration callback: function(ind) { //What is passed here is the index value $('#page').text(ind + 1); } }); })() </script> </body></html>slider-H5.js code:
(function($) { /* Image scrolling effect @jQuery or @String box: scrolling list jQuery object or selector such as: the scrolling element is the outer layer of li ul @object config: { @Number width: one scroll width, default is The width of the first level child element in the box [if the width of the child elements is uneven, the scrolling effect will be disordered] @Number size: List length, defaults to the number of all first-level sub-elements in the box [if size is not equal to the number of first-level sub-elements, circular scrolling is not supported] @Boolean loop: Whether to support circular scrolling, default true @Boolean auto: Whether to automatically scroll, When supporting automatic scrolling, circular scrolling must be supported, otherwise the setting is invalid. The default is true @Number auto_wait_time: The time interval for automatic rotation, the default is: 3000ms @Function callback: After scrolling, the callback function enters a parameter: the current scroll node index value} */ function mggScrollImg(box, config) { this.box = $(box); this.config = $.extend({}, config || {}) ; this.width = this.config.width || this.box.children().eq(0).width(); //The width of one scroll this.size = this.config.size || this.box.children().length; this.loop = this.config.loop !== undefined ? (this.config.loop == true ? true: false) : true; //By default, this.auto can loop and scroll = this.config.auto !== undefined ? (this.config.auto == true ? true: false) : true; //Automatic scrolling by default this.auto_wait_time = this.config.auto_wait_time || 3000; //Carousel interval this.scroll_time = this.config.scroll_time !== undefined ? (this.config.scroll_time > 0 ? this.config.scroll_time: 0) : 300; //Scrolling duration this.minleft = - this.width * (this.size - 1); //Minimum left value, note that it is a negative number [value without looping] this.maxleft = 0; //Maximum lfet value [value without looping] this.now_left = 0; //Initial position information [value without looping] this.point_x = null; //Record an x coordinate this.point_y = null; //Record a y coordinate this.move_left = false; //Record which way to slide this.index = 0; this.busy = false; this.timer; 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); //Here we decide whether to block the default touch event based on the return value} }).bind('touchend', function(e) { ! self.busy && self.move_end(); }); }, /* Initialize circular scrolling. When multiple sub-elements need to be scrolled at one time, the circular scrolling effect is not supported yet. If you want to achieve the effect of scrolling multiple child elements at one time, you can implement the loop scrolling idea through the page structure: copy the first and last nodes to the end*/ init_loop: function() { if (this.box.children().length > 1 && this. box.children().length == this.size && this.loop) { // Currently only supports loops when size and the number of child nodes are equal this.now_left = -this.width; //Set the initial position information this.minleft = -this.width * this.size; //Minimum left value 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('width', this.width * (this.size + 2)); } else { this.loop = false; this.box.css('width', this.width * this.size); } }, auto_scroll: function() { //Auto scroll 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) { //Scroll to the specified index page var self = this; if (self.busy) return; clearTimeout(self.timer); self.busy = true; if (self .loop) { //If loop ind = ind < 0 ? -1 : ind; ind = ind > self.size ? self.size: ind; } else { 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); } else if (self.loop && (self.now_left == -self.width * (ind + 1))) { self.complete(ind); } else { if (ind == -1 || ind == self.size) { //Loop scrolling boundary self.index = ind == -1 ? (self.size - 1) : 0; self.now_left = ind == -1 ? 0 : -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); } }, complete: function(ind) { //Animation completion callback 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)); self.auto_scroll(); }, next: function () { //Scroll the next page if (!this.busy) { this.go_index(this.index + 1); } }, prev: function() { //Scroll the previous page if (!this.busy) { this.go_index(this.index - 1); } }, move: function(point_x, point_y) { //Sliding screen processing function var changeX = point_x - (this.point_x === null ? point_x: this.point_x), changeY = point_y - (this.point_y === null ? 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; this.move_left = changeX < 0; if (sin > Math.sin(Math.PI / 3) | | sin < -Math.sin(Math.PI / 3)) { //Scrolling screen angle range: PI/3 -- 2PI/3 return_value = true; //Does not prevent default behavior} this.point_x = point_x; this.point_y = point_y; this.box.css(this.get_style(2)); return return_value; }, move_end: function() { var changeX = this.now_left % this.width, ind; if (this.now_left < this.minleft) { //Slide your finger to the left ind = this.index + 1; } else if (this.now_left > this.maxleft) { //Slide your finger to the right ind = this.index - 1; } else if (changeX != 0) { if (this.move_left) { //Slide your finger to the left ind = this.index + 1; } else { //Slide your finger to the right ind = this.index - 1; } } else { ind = this.index; } this.point_x = this.point_y = null; this.go_index(ind); }, /* Get the animation style. To be compatible with more browsers, you can extend this method @int fig: 1 animation 2 no animation*/ get_style: function(fig) { var x = this.now_left, time = fig == 1? this .scroll_time: 0; return { '-webkit-transition': '-webkit-transform ' + time + 'ms', '-webkit-transform': 'translate3d(' + x + 'px,0,0)', '-webkit-backface-visibility': 'hidden', 'transition': 'transform ' + time + 'ms', 'transform': 'translate3d(' + x + 'px, 0,0)' }; } }); /* This provides an external calling interface and an external interface method next: next page prev: previous page go: scroll to the specified page*/ $.mggScrollImg = function(box, config) { var scrollImg = new mggScrollImg(box, config); return { //Provide external interface next: function() { scrollImg.next(); }, prev: function() { scrollImg .prev(); }, go: function(ind) { scrollImg.go_index(parseInt(ind) || 0); } } }})(jQuery)The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.