怎樣實(shí)現(xiàn)H5+CSS3手指滑動(dòng)切換圖片的示例代碼
發(fā)布時(shí)間：2019-05-05 14:54:37 作者：sayno 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了怎樣實(shí)現(xiàn)H5+CSS3手指滑動(dòng)切換圖片的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
包含3個(gè)文件：html、slider-H5.js、jquery.js。在html中可配置滑動(dòng)參數(shù)。具體代碼如下：
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, 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手指滑動(dòng)切換圖片
</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>
這里通過(guò)回調(diào)顯示當(dāng)前滾動(dòng)到多少頁(yè):
<span id="page">
0
</span>
</div>
<script src="jquery-1.10.2yuan.js">
</script>
<script src="slider-H5.js">
</script>
<script>
(function() {
/*
注意：$.mggScrollImg返回的scrollImg對(duì)象上有
next，prev，go三個(gè)方法，可以實(shí)現(xiàn)外部對(duì)滾動(dòng)索引的控制。
如：scrollImg.next();//會(huì)切換到下一張圖片
scrollImg.go(0);//會(huì)切換到第一張圖片
*/
var scrollImg = $.mggScrollImg('.imgbox ul', {
loop: true,
//循環(huán)切換
auto: true,
//自動(dòng)切換
auto_wait_time: 3000,
//輪播間隔
scroll_time: 300,
//滾動(dòng)時(shí)長(zhǎng)
callback: function(ind) { //這里傳過(guò)來(lái)的是索引值
$('#page').text(ind + 1);
}
});
})()
</script>
</body>
</html>
slider-H5.js 代碼：
(function($) {
/*
圖片滾動(dòng)效果
@jQuery or @String box : 滾動(dòng)列表jQuery對(duì)象或者選擇器 如：滾動(dòng)元素為li的外層ul
@object config : {
@Number width : 一次滾動(dòng)寬度，默認(rèn)為box里面第一個(gè)一級(jí)子元素寬度[如果子元素寬度不均勻則滾動(dòng)效果會(huì)錯(cuò)亂]
@Number size : 列表長(zhǎng)度，默認(rèn)為box里面所有一級(jí)子元素個(gè)數(shù)[如果size不等于一級(jí)子元素個(gè)數(shù)，則不支持循環(huán)滾動(dòng)]
@Boolean loop : 是否支持循環(huán)滾動(dòng) 默認(rèn) true
@Boolean auto : 是否自動(dòng)滾動(dòng),支持自動(dòng)滾動(dòng)時(shí)必須支持循環(huán)滾動(dòng)，否則設(shè)置無(wú)效,默認(rèn)為true
@Number auto_wait_time : 自動(dòng)輪播一次時(shí)間間隔,默認(rèn)為：3000ms
@Function callback : 滾動(dòng)完回調(diào)函數(shù)，參入一個(gè)參數(shù)當(dāng)前滾動(dòng)節(jié)點(diǎn)索引值
}
*/
function mggScrollImg(box, config) {
this.box = $(box);
this.config = $.extend({},
config || {});
this.width = this.config.width || this.box.children().eq(0).width(); //一次滾動(dòng)的寬度
this.size = this.config.size || this.box.children().length;
this.loop = this.config.loop !== undefined ? (this.config.loop == true ? true: false) : true; //默認(rèn)能循環(huán)滾動(dòng)
this.auto = this.config.auto !== undefined ? (this.config.auto == true ? true: false) : true; //默認(rèn)自動(dòng)滾動(dòng)
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; //滾動(dòng)時(shí)長(zhǎng)
this.minleft = -this.width * (this.size - 1); //最小left值，注意是負(fù)數(shù)[不循環(huán)情況下的值]
this.maxleft = 0; //最大lfet值[不循環(huán)情況下的值]
this.now_left = 0; //初始位置信息[不循環(huán)情況下的值]
this.point_x = null; //記錄一個(gè)x坐標(biāo)
this.point_y = null; //記錄一個(gè)y坐標(biāo)
this.move_left = false; //記錄向哪邊滑動(dòng)
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); //這里根據(jù)返回值覺(jué)得是否阻止默認(rèn)touch事件
}
}).bind('touchend',
function(e) { ! self.busy && self.move_end();
});
},
/*
初始化循環(huán)滾動(dòng),當(dāng)一次性需要滾動(dòng)多個(gè)子元素時(shí)，暫不支持循環(huán)滾動(dòng)效果,
如果想實(shí)現(xiàn)一次性滾動(dòng)多個(gè)子元素效果，可以通過(guò)頁(yè)面結(jié)構(gòu)實(shí)現(xiàn)
循環(huán)滾動(dòng)思路：復(fù)制首尾節(jié)點(diǎn)到尾首
*/
init_loop: function() {
if (this.box.children().length > 1 && this.box.children().length == this.size && this.loop) { //暫時(shí)只支持size和子節(jié)點(diǎn)數(shù)相等情況的循環(huán)
this.now_left = -this.width; //設(shè)置初始位置信息
this.minleft = -this.width * this.size; //最小left值
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() { //自動(dòng)滾動(dòng)
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) { //滾動(dòng)到指定索引頁(yè)面
var self = this;
if (self.busy) return;
clearTimeout(self.timer);
self.busy = true;
if (self.loop) { //如果循環(huán)
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) { //循環(huán)滾動(dòng)邊界
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) { //動(dòng)畫(huà)完成回調(diào)
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() { //下一頁(yè)滾動(dòng)
if (!this.busy) {
this.go_index(this.index + 1);
}
},
prev: function() { //上一頁(yè)滾動(dòng)
if (!this.busy) {
this.go_index(this.index - 1);
} },
move: function(point_x, point_y) { //滑動(dòng)屏幕處理函數(shù)
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)) { //滑動(dòng)屏幕角度范圍：PI/3 -- 2PI/3
return_value = true; //不阻止默認(rèn)行為
}
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) { //手指向左滑動(dòng)
ind = this.index + 1;
} else if (this.now_left > this.maxleft) { //手指向右滑動(dòng)
ind = this.index - 1;
} else if (changeX != 0) {
if (this.move_left) { //手指向左滑動(dòng)
ind = this.index + 1;
} else { //手指向右滑動(dòng)
ind = this.index - 1;
}
} else {
ind = this.index;
}
this.point_x = this.point_y = null;
this.go_index(ind);
},
/*
獲取動(dòng)畫(huà)樣式，要兼容更多瀏覽器，可以擴(kuò)展該方法
@int fig : 1 動(dòng)畫(huà) 2 沒(méi)動(dòng)畫(huà)
*/
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)'
};
}
});
/*
這里對(duì)外提供調(diào)用接口，對(duì)外提供接口方法
next ：下一頁(yè)
prev ：上一頁(yè)
go ：滾動(dòng)到指定頁(yè)
*/
$.mggScrollImg = function(box, config) {
var scrollImg = new mggScrollImg(box, config);
return { //對(duì)外提供接口
next: function() {
scrollImg.next();
},
prev: function() {
scrollImg.prev();
},
go: function(ind) {
scrollImg.go_index(parseInt(ind) || 0);
}
}
}
})(jQuery)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
css實(shí)現(xiàn)導(dǎo)航切換的實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了css實(shí)現(xiàn)導(dǎo)航切換效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-08-15
用CSS實(shí)現(xiàn)Tab頁(yè)切換效果的示例代碼
這篇文章主要介紹了用CSS實(shí)現(xiàn)Tab頁(yè)切換效果的示例代碼的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-19CSS實(shí)現(xiàn)Tab頁(yè)切換實(shí)例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)Tab頁(yè)切換實(shí)例代碼,需要的朋友可以參考下2018-01-31
CSS使用classList實(shí)現(xiàn)兩個(gè)按鈕樣式的切換
在一些頁(yè)面我們需要使用兩個(gè)按鈕來(lái)回切換，怎么實(shí)現(xiàn)這樣的功能呢？下面小編給大家?guī)?lái)了CSS使用classList實(shí)現(xiàn)兩個(gè)按鈕樣式的切換效果，需要的朋友跟隨腳本之家小編一起學(xué)習(xí)2018-01-24
這篇文章主要介紹了純CSS3制作頁(yè)面切換效果的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-05-30
