Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use html5+CSS3 to achieve slide for picture effect" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "how to use html5+CSS3 to achieve slide for picture effect" article can help you solve the problem.

The sliding parameters can be configured in html. The specific code is as follows:

HTML Code:

H5 swipe to toggle picture 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;}

Here, the callback shows how many pages you are currently scrolling to: 0 (function () {/ * Note: the scrollImg object returned by $.mggScrollImg has three next,prev,go methods, which can achieve external control over the scrolling index. For example: scrollImg.next (); / / will switch to the next picture scrollImg.go (0) / / switch to the first picture * / var scrollImg = $.mggScrollImg ('.imgbox ul', {loop: true, / / cycle switch auto: true, / / automatically switch auto_wait_time: 3000 / / rotation interval scroll_time: 300, / / scrolling duration callback: function (ind) {/ / the index value $('# page') .text (ind + 1) is passed here }) ()

Slider-H5.js Code:

(function ($) {/ * picture scrolling effect @ jQuery or @ String box: scroll list jQuery object or selector such as: outer ul @ object config: {@ Number width: scroll width of li The default is the width of the first-level child elements in box [the scrolling effect will be confused if the child-element widths are uneven] @ Number size: list length. Default is the number of all first-level child elements in box [if size is not equal to the number of first-level child elements. Circular scrolling is not supported] @ Boolean loop: whether circular scrolling is supported default true @ Boolean auto: whether automatic scrolling is supported. Circular scrolling must be supported when automatic scrolling is supported. Otherwise, the setting is invalid. Default is true @ Number auto_wait_time. Default is: 3000ms @ Function callback: callback function after scrolling, including a parameter current scrolling 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 a scroll this.size = this.config.size | | this.box.children (). Length; this.loop = this.config.loop! = = undefined? (this.config.loop = = true? True: false): true; / / can cycle through this.auto = this.config.auto! = = undefined? (this.config.auto = = true? True: false): true; / / default auto scrolling this.auto_wait_time = this.config.auto_wait_time | | 3000; / / rotation 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 negative [value without loop] this.maxleft = 0; / / maximum LFET value [value without loop] this.now_left = 0 / / initial position information [value without loop] this.point_x = null; / / record an x coordinate this.point_y = null; / / record a y coordinate this.move_left = false; / / to which side the record slides 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.promoalEvent.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.normalalEvent.targetTouches; if (t.length = = 1 & &! self.busy) {return self.move (t [0] .screenX, t [0] .screenY); / / whether or not to block the default touch event}} based on the returned value. Bind ('touchend', function (e) {! Self.busy & self.move_end ();}) }, / * initialize circular scrolling. When multiple child elements need to be scrolled at a time, the circular scrolling effect is not supported. If you want to achieve the effect of scrolling multiple child elements at a time The idea of circular scrolling can be realized through the page structure: copy the head and tail nodes * / init_loop: function () {if (this.box.children (). Length > 1 & & this.box.children (). Length = = this.size & & this.loop) {/ / only cycles with equal number of size and child nodes are supported for the time being This.now_left =-this.width / / set 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 scrolling 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 scroll 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 () {/ / next page scroll if (! this.busy) {this.go_index (this.index + 1);}}, prev: function () {/ / previous page scroll 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)) { //滑动屏幕角度范围：PI/3 -- 2PI/3 return_value = true; //不阻止默认行为 } 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) { //手指向左滑动 ind = this.index + 1; } else if (this.now_left >

This.maxleft) {/ / fingers slide right ind = this.index-1;} else if (changeX! = 0) {if (this.move_left) {/ / fingers slide left ind = this.index + 1;} else {/ / fingers slide 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 the method @ int fig: 1 Animation 2 without 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)'} }); / * call API and 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 {/ / provides the interface next: function () {scrollImg.next ();}, prev: function () {scrollImg.prev ();}, go: function (ind) {scrollImg.go_index (parseInt (ind) | | 0) (jQuery) this is the end of the introduction on "how to use html5+CSS3 to achieve the effect of sliding for pictures". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.