html, Slider-H5.js, jquery.js의 3개 파일이 포함되어 있습니다. 슬라이딩 매개변수는 html로 구성할 수 있습니다. 구체적인 코드는 다음과 같습니다.
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 =device-width, target-densitydpi=high-dpi, 초기 크기=1.0, 최대 크기=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 손가락 슬라이드로 사진 전환</title> <style> ul,li{margin:0;padding:0; } @media 화면 및 (최소 너비:240px) { html, body{ 글꼴 크기:9px; } } @media 화면 및 (min-width:320px) { html, body{ 글꼴 크기:12px } } 화면 및 (최소 너비:480px) { html, body{ 글꼴 크기:18px } } @media 화면 및 (최소 너비:640px) { html, body{ 글꼴 크기:24px; } } @media 화면 및 (최소 너비:960px) { html, body{ 글꼴 크기:36px } } div.imgbox; 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{너비:24rem;높이: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> 여기서 현재 값은 다음과 같습니다. 콜백을 통해 표시됩니다. 스크롤할 페이지 수: <span id=page> 0 </span> </div> <script src=jquery-1.10.2yuan.js> </script> <script src=slider-H5.js> </script> <script> (function() { /* 참고: $. mggScrollImg 스크롤 인덱스의 외부 제어를 실현할 수 있는 next, prev 및 go의 세 가지 방법이 있습니다. 예를 들어: scrollImg.next();//다음 그림으로 전환합니다. scrollImg.go(0);//첫 번째 그림으로 전환합니다*/ var scrollImg = $.mggScrollImg('.imgbox ul', { loop : true, //주기 전환 자동: true, //자동 전환 auto_wait_time: 3000, //캐러셀 간격 scroll_time: 300, //스크롤 기간 콜백: function(ind) { //여기에 전달되는 것은 인덱스 값입니다. $('#page').text(ind + 1) })() </script> </body></html>슬라이더-H5.js 코드:
(function($) { /* 이미지 스크롤 효과 @jQuery 또는 @String box: 스크롤 목록 jQuery 객체 또는 선택기: 스크롤 요소는 li ul의 외부 레이어입니다. @object config: { @Number 너비: 하나의 스크롤 너비, 기본값은 상자의 첫 번째 수준 하위 요소의 너비입니다. [하위 요소의 너비가 고르지 않으면 스크롤 효과가 혼란스러워집니다.] @Number 크기: 목록 길이, 기본값은 상자에 있는 모든 첫 번째 수준 하위 요소의 수입니다. [크기가 첫 번째 수준 하위 요소의 수와 같지 않으면 순환 스크롤이 지원되지 않습니다.] @Boolean 루프: 순환 스크롤 지원 여부 , 기본값은 true @Boolean auto: 자동 스크롤 여부, 자동 스크롤을 지원하는 경우 순환 스크롤을 지원해야 합니다. 그렇지 않으면 설정이 유효하지 않습니다. @Number auto_wait_time: 자동 회전의 시간 간격, 기본값은 3000ms @입니다. 함수 콜백: 스크롤 후 콜백 함수는 매개변수를 입력합니다: 현재 스크롤 노드 인덱스 값} */ 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 !== 정의되지 않음 ? (this.config.loop == true ? true: false) : //기본적으로 this.auto는 가능합니다. 루프 및 스크롤 = this.config.auto !== 정의되지 않음 ? (this.config.auto == true ? true: false) : //기본적으로 자동 스크롤 this.auto_wait_time = this.config.auto_wait_time || 3000; //캐러셀 간격 this.scroll_time = this.config.scroll_time !== 정의되지 않음 ? (this.config.scroll_time > 0 ? this.config.scroll_time: 0) : 300; //스크롤 기간 this.minleft = - .width * (this.size - 1); //최소 왼쪽 값, 음수임에 유의하세요. [루프가 없는 값] this.maxleft = 0; //최대 lfet 값 [루핑 없는 값] this.now_left = 0; //초기 위치 정보 [루핑 없는 값] this.point_x = null; //x 좌표 기록 this.point_y = null; coordinate this.move_left = false; //슬라이드하는 방향을 기록합니다. this.busy = false.init(); $.extend(mggScrollImg.prototype, { init: function() { this.bind_event(); this.init_loop(); this.auto_scroll(); }, bind_event: function() { var self = this; self.box. 바인딩('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. 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; self.busy = true; self .loop) { //루프 ind = ind < 0 ? -1 : ind; ind = ind > self.size: ind } else { ind = ind < 0 ? 0 : ind; ind >= self.size ? (self.size - 1) : ind; } if (!self.loop && (self.now_left == -(self.width * ind))) 완료(ind); } else if (self.loop && (self.now_left == -self.width * (ind + 1))) { self.complete(ind) } else { if (ind) == -1 || ind == self.size) { //루프 스크롤 경계 self.index == -1 ? (self.size - 1) : 0; self.now_left == -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) } }, 완료: function(ind) { //애니메이션 완료 콜백 var self = this; self.busy = false && self.config.callback(self.index); self.minleft; } else if (ind == self.size) { self.now_left = self.maxleft } self.box.css(this.get_style(2)), next: 함수 () { //다음 페이지로 스크롤 if (!this.busy) { this.go_index(this.index + 1) } }, 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), marginleft = this.now_left, return_value = false, sin = 변경Y / Math.sqrt(changeX * 변경X + 변경Y * 변경Y); this.now_left = marginleft + 변경X = 변경X < 0 if (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() { varchangeX = this.now_left % this.width, ind; 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 - } } else { ind = this.index } this.point_x = this.go_index(ind) ; /* 애니메이션 스타일을 가져오면 더 많은 브라우저와 호환 가능합니다. @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' + 시간 + 'ms', '-webkit-transform': 'translate3d(' + x + 'px,0,0)', '-webkit-backface-visibility': '숨김', '전환': '변형 ' + 시간 + 'ms', '변형': 'translate3d(' + x + 'px, 0,0)' } } }) /* 외부 호출 인터페이스와 외부 인터페이스 메소드를 제공합니다. next: 다음 페이지 prev: 이전 페이지 go: 지정된 페이지로 스크롤*/ $.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 Network를 지지해 주시길 바랍니다.