touchSlider插件案例
<!doctype html>
<html lang="en">
<head>
<title>jQuery手机图片触屏滑动轮播效果代码</title>
</head>
<style type="text/css">
*{
margin: 0;padding: 0;
list-style: none;
}
.main_visual{
height:500px;
border-top:1px solid #d7d7d7;
overflow:hidden;
position:relative;
}
.main_image{
height:100%;
overflow:hidden;
position:relative;
}
.main_image ul{
width:9999px;
height:100%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}
.main_image li{
float:left;
width:100%;
height:100%;
}
.main_image li img{
display:block;
width:100%;
height:100%;
}
div.flicking_con{
position:absolute;
top:460px;
left:50%;
z-index:999;
width:300px;
height:21px;
margin:0 0 0 -50px;
}
div.flicking_con a{
float:left;
width:21px;
height:21px;
background:url('./images/btn_main_img.png') 0 0 no-repeat;
display:block;
text-indent:-1000px;
}
div.flicking_con a.on{
background-position:0 -21px;
}
#btn_prev,#btn_next{
z-index:11111;
position:absolute;
display:block;
width:73px;
height:74px;
top:50%;
margin-top:-37px;
display:none;
}
#btn_prev{
background:url(./images/hover_left.png) no-repeat left top;
left:100px;
}
#btn_next{
background:url(./images/hover_right.png) no-repeat right top;
right:100px;
}
</style>
<body>
<div class="main_visual">
<div class="flicking_con">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
<div class="main_image">
<ul>
<li><img src="1.jpg"/></li>
<li><img src="2.jpg"/></li>
<li><img src="3.jpg"/></li>
<li><img src="4.jpg"/></li>
<li><img src="5.jpg"/></li>
</ul>
<a href="" id="btn_prev"></a>
<a href="" id="btn_next"></a>
</div>
</div>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="jquery.touchSlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//左右箭头显示与隐藏
$(".main_visual").hover(function(){
$("#btn_prev,#btn_next").fadeIn()
},function(){
$("#btn_prev,#btn_next").fadeOut()
});
$dragBln = false; $(".main_image").touchSlider({
flexible : true,//调用
speed : 200,//播放速度
btn_prev : $("#btn_prev"),//左右箭头
btn_next : $("#btn_next"),
paging : $(".flicking_con a"),//页面相对应圆圈
counter : function (e){
$(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
}
}); $(".main_image").bind("mousedown", function() {
$dragBln = false;
}); $(".main_image").bind("dragstart", function() {
$dragBln = true;
}); $(".main_image a").click(function(){
if($dragBln) {
return false;
}
}); timer = setInterval(function(){
$("#btn_next").click();
}, 1000); $(".main_visual").hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function(){
$("#btn_next").click();
},1000);
}); $(".main_image").bind("touchstart",function(){
clearInterval(timer);
}).bind("touchend", function(){
timer = setInterval(function(){
$("#btn_next").click();
}, 1000);
});
});
</script>
</script>
</body>
</html>
/**
* @name jQuery.touchSlider
* @version 201209_2
* @since 201106
* @param Object settings 환경변수 오브젝트
* roll - 순환 (default true)
* flexible - 유동 레이아웃 (default false)
* view - 다중 컬럼 (default 1)
* speed - 애니메이션 속도 (default 75)
* range - 넘김 판정 범위 (default 0.15)
* page - 초기 페이지 (default 1)
* transition - CSS3 transition 사용 (default false)
* btn_prev - prev 버튼 (jQuery Object, default null)
* btn_next - next 버튼 (jQuery Object, default null)
* paging - page 버튼 (jQuery Object, default null)
* initComplete - 초기화 콜백
* counter - 슬라이드 콜백, 카운터
*
* @example
$("#target").touchSlider({
flexible : true
});
*/ (function ($) { $.fn.touchSlider = function (settings) { settings.supportsCssTransitions = (function (style) {
var prefixes = ['Webkit','Moz','Ms'];
for(var i=0, l=prefixes.length; i < l; i++ ) {
if( typeof style[prefixes[i] + 'Transition'] !== 'undefined') {
return true;
}
}
return false;
})(document.createElement('div').style); settings = jQuery.extend({
roll : true,
flexible : false,
btn_prev : null,
btn_next : null,
paging : null,
speed : 75,
view : 1,
range : 0.15,
page : 1,
transition : false,
initComplete : null,
counter : null,
multi : false
}, settings); var opts = [];
opts = $.extend({}, $.fn.touchSlider.defaults, settings); return this.each(function () { $.fn.extend(this, touchSlider); var _this = this; this.opts = opts;
this._view = this.opts.view;
this._speed = this.opts.speed;
this._tg = $(this);
this._list = this._tg.children().children();
this._width = parseInt(this._tg.css("width"));
this._item_w = parseInt(this._list.css("width"));
this._len = this._list.length;
this._range = this.opts.range * this._width;
this._pos = [];
this._start = [];
this._startX = 0;
this._startY = 0;
this._left = 0;
this._top = 0;
this._drag = false;
this._scroll = false;
this._btn_prev;
this._btn_next; this.init(); $(this)
.bind("touchstart", this.touchstart)
.bind("touchmove", this.touchmove)
.bind("touchend", this.touchend)
.bind("dragstart", this.touchstart)
.bind("drag", this.touchmove)
.bind("dragend", this.touchend) $(window).bind("orientationchange resize", function () {
_this.resize(_this);
});
}); }; var touchSlider = { init : function () {
var _this = this; $(this).children().css({
"width":this._width + "px",
"overflow":"visible"
}); if(this.opts.flexible) this._item_w = this._width / this._view;
if(this.opts.roll) this._len = Math.ceil(this._len / this._view) * this._view; var page_gap = (this.opts.page > 1 && this.opts.page <= this._len) ? (this.opts.page - 1) * this._item_w : 0; for(var i=0; i<this._len; ++i) {
this._pos[i] = this._item_w * i - page_gap;
this._start[i] = this._pos[i];
this._list.eq(i).css({
"float" : "none",
"display" : "block",
"position" : "absolute",
"top" : "0",
"left" : this._pos[i] + "px",
"width" : this._item_w + "px"
});
if(this.opts.supportsCssTransitions && this.opts.transition) {
this._list.eq(i).css({
"-moz-transition" : "0ms",
"-moz-transform" : "",
"-ms-transition" : "0ms",
"-ms-transform" : "",
"-webkit-transition" : "0ms",
"-webkit-transform" : "",
"transition" : "0ms",
"transform" : ""
});
}
} if(this.opts.btn_prev && this.opts.btn_next) {
this.opts.btn_prev.bind("click", function() {
_this.animate(1, true);
return false;
})
this.opts.btn_next.bind("click", function() {
_this.animate(-1, true);
return false;
});
} if(this.opts.paging) {
$(this._list).each(function (i, el) {
//var btn_page = _this.opts.paging.eq(0).clone();
var btn_page = _this.opts.paging.eq(i);
//_this.opts.paging.before(btn_page); btn_page.bind("click", function(e) {
_this.go_page(i, e);
return false;
});
}); //this.opts.paging.remove();
} this.counter();
this.initComplete();
}, initComplete : function () {
if(typeof(this.opts.initComplete) == "function") {
this.opts.initComplete(this);
}
}, resize : function (e) {
if(e.opts.flexible) {
var tmp_w = e._item_w; e._width = parseInt(e._tg.css("width"));
e._item_w = e._width / e._view;
e._range = e.opts.range * e._width; for(var i=0; i<e._len; ++i) {
e._pos[i] = e._pos[i] / tmp_w * e._item_w;
e._start[i] = e._start[i] / tmp_w * e._item_w;
e._list.eq(i).css({
"left" : e._pos[i] + "px",
"width" : e._item_w + "px"
});
if(this.opts.supportsCssTransitions && this.opts.transition) {
e._list.eq(i).css({
"-moz-transition" : "0ms",
"-moz-transform" : "",
"-ms-transition" : "0ms",
"-ms-transform" : "",
"-webkit-transition" : "0ms",
"-webkit-transform" : "",
"transition" : "0ms",
"transform" : ""
});
}
}
} this.counter();
}, touchstart : function (e) {
if((e.type == "touchstart" && e.originalEvent.touches.length <= 1) || e.type == "dragstart") {
this._startX = e.pageX || e.originalEvent.touches[0].pageX;
this._startY = e.pageY || e.originalEvent.touches[0].pageY;
this._scroll = false; this._start = [];
for(var i=0; i<this._len; ++i) {
this._start[i] = this._pos[i];
}
}
}, touchmove : function (e) {
if((e.type == "touchmove" && e.originalEvent.touches.length <= 1) || e.type == "drag") {
this._left = (e.pageX || e.originalEvent.touches[0].pageX) - this._startX;
this._top = (e.pageY || e.originalEvent.touches[0].pageY) - this._startY;
var w = this._left < 0 ? this._left * -1 : this._left;
var h = this._top < 0 ? this._top * -1 : this._top; if (w < h || this._scroll) {
this._left = 0;
this._drag = false;
this._scroll = true;
} else {
e.preventDefault();
this._drag = true;
this._scroll = false;
this.position(e);
} for(var i=0; i<this._len; ++i) {
var tmp = this._start[i] + this._left; if(this.opts.supportsCssTransitions && this.opts.transition) {
var trans = "translate3d(" + tmp + "px,0,0)";
this._list.eq(i).css({
"left" : "",
"-moz-transition" : "0ms",
"-moz-transform" : trans,
"-ms-transition" : "0ms",
"-ms-transform" : trans,
"-webkit-transition" : "0ms",
"-webkit-transform" : trans,
"transition" : "0ms",
"transform" : trans
});
} else {
this._list.eq(i).css("left", tmp + "px");
} this._pos[i] = tmp;
}
}
}, touchend : function (e) {
if((e.type == "touchend" && e.originalEvent.touches.length <= 1) || e.type == "dragend") {
if(this._scroll) {
this._drag = false;
this._scroll = false;
return false;
} this.animate(this.direction());
this._drag = false;
this._scroll = false;
}
}, position : function (d) {
var gap = this._view * this._item_w; if(d == -1 || d == 1) {
this._startX = 0;
this._start = [];
for(var i=0; i<this._len; ++i) {
this._start[i] = this._pos[i];
}
this._left = d * gap;
} else {
if(this._left > gap) this._left = gap;
if(this._left < - gap) this._left = - gap;
} if(this.opts.roll) {
var tmp_pos = [];
for(var i=0; i<this._len; ++i) {
tmp_pos[i] = this._pos[i];
}
tmp_pos.sort(function(a,b){return a-b;}); var max_chk = tmp_pos[this._len-this._view];
var p_min = $.inArray(tmp_pos[0], this._pos);
var p_max = $.inArray(max_chk, this._pos); if(this._view <= 1) max_chk = this._len - 1;
if(this.opts.multi) {
if((d == 1 && tmp_pos[0] >= 0) || (this._drag && tmp_pos[0] >= 100)) {
for(var i=0; i<this._view; ++i, ++p_min, ++p_max) {
this._start[p_max] = this._start[p_min] - gap;
this._list.eq(p_max).css("left", this._start[p_max] + "px");
}
} else if((d == -1 && tmp_pos[0] <= 0) || (this._drag && tmp_pos[0] <= -100)) {
for(var i=0; i<this._view; ++i, ++p_min, ++p_max) {
this._start[p_min] = this._start[p_max] + gap;
this._list.eq(p_min).css("left", this._start[p_min] + "px");
}
}
} else {
if((d == 1 && tmp_pos[0] >= 0) || (this._drag && tmp_pos[0] > 0)) {
for(var i=0; i<this._view; ++i, ++p_min, ++p_max) {
this._start[p_max] = this._start[p_min] - gap;
this._list.eq(p_max).css("left", this._start[p_max] + "px");
}
} else if((d == -1 && tmp_pos[max_chk] <= 0) || (this._drag && tmp_pos[max_chk] <= 0)) {
for(var i=0; i<this._view; ++i, ++p_min, ++p_max) {
this._start[p_min] = this._start[p_max] + gap;
this._list.eq(p_min).css("left", this._start[p_min] + "px");
}
}
}
} else {
if(this.limit_chk()) this._left = this._left / 2;
}
}, animate : function (d, btn_click) {
if(this._drag || !this._scroll || btn_click) {
var _this = this;
var speed = this._speed; if(btn_click) this.position(d); var gap = d * (this._item_w * this._view);
if(this._left == 0 || (!this.opts.roll && this.limit_chk()) ) gap = 0; this._list.each(function (i, el) {
_this._pos[i] = _this._start[i] + gap; if(_this.opts.supportsCssTransitions && _this.opts.transition) {
var transition = speed + "ms";
var transform = "translate3d(" + _this._pos[i] + "px,0,0)"; if(btn_click) transition = "0ms"; $(this).css({
"left" : "",
"-moz-transition" : transition,
"-moz-transform" : transform,
"-ms-transition" : transition,
"-ms-transform" : transform,
"-webkit-transition" : transition,
"-webkit-transform" : transform,
"transition" : transition,
"transform" : transform
});
} else {
$(this).stop();
$(this).animate({"left": _this._pos[i] + "px"}, speed);
}
}); this.counter();
}
}, direction : function () {
var r = 0; if(this._left < -(this._range)) r = -1;
else if(this._left > this._range) r = 1; if(!this._drag || this._scroll) r = 0; return r;
}, limit_chk : function () {
var last_p = parseInt((this._len - 1) / this._view) * this._view;
return ( (this._start[0] == 0 && this._left > 0) || (this._start[last_p] == 0 && this._left < 0) );
}, go_page : function (i, e) {
var crt = ($.inArray(0, this._pos) / this._view) + 1;
var cal = crt - (i + 1); while(cal != 0) {
if(cal < 0) {
this.animate(-1, true);
cal++;
} else if(cal > 0) {
this.animate(1, true);
cal--;
}
}
}, counter : function () {
if(typeof(this.opts.counter) == "function") {
var param = {
total : Math.ceil(this._len / this._view),
current : ($.inArray(0, this._pos) / this._view) + 1
};
this.opts.counter(param);
}
} }; })(jQuery);
touchSlider插件案例的更多相关文章
- 中国省市区地址三级联动jQuery插件 案例下载
中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...
- AS 自定义 Gradle plugin 插件 案例 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- 一个前端引用Facebook评论插件案例
最近公司海外的同事提了一个新的需求:那就是将Facebook的评论系统接入到公司海外网站的资讯详情页. 下面做一个简单的介绍: 首先我们登录到Facebook开发者平台:然后进入评论插件系统(http ...
- 讲一个使用jquery-slick旋转木马效果插件案例
效果展示连接 http://www.jqcool.net/demo/201405/jquery-slick/ 今天刚接触这个插件,被这插件搞的大脑风暴了 所以来记录一下使用方法 首先注意一点 不特别标 ...
- React Native 常用插件案例
(二).基础入门: 1.React Native For Android环境配置以及第一个实例 2.React Native开发IDE安装及配置 3.React Native应用设备运行(Runnin ...
- Chrome 插件特性及实战场景案例分析
一.前言 提起Chrome扩展插件(Chrome Extension),每个人的浏览器中或多或少都安装了几个插件,像一键翻译.广告屏蔽.录屏等等,通过使用这些插件,可以有效的提高我们的工作效率:但有时 ...
- 通过案例练习掌握SSH 的整合
1. SSH整合_方案01 ** 整合方案01 Struts2框架 Spring框架 在Spring框架中整合了Hibernate(JDBC亦可) 一些业务组件(Service组件)也可以放入 ...
- jQuery自定义插件--banner图滚动
前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...
- Django-website 程序案例系列-17 forms表单验证的字段解释
1.Django内置字段如下: Field required=True, 是否允许为空 widget=None, HTML插件 label=None, 用于生成Label标签或显示内容 initial ...
随机推荐
- CentOS 使用 LAMP 环境开启 SSL 搭建 WordPress
环境阿里云新装CentOS 7.4, 使用yum(非编译安装)搭建LAMP, CA证书为阿里云免费提供的, WordPress为官网下载 安装 LAMP 并开启 HTTPS 1, 关闭防火墙 # sy ...
- json loads/dumps
json.dumps : dict转成str json.loads:str转成dict dict_ = {1: 2, 3: 4, "} print(type(dict_), dict_) # ...
- win32 signal
Remarks The signal function enables a process to choose one of several ways to handle an interrupt ...
- Android学习记录（10）—Android之图片颜色处理
你想做到跟美图秀秀一样可以处理自己的照片,美化自己的照片吗?其实你也可以自己做一个这样的软件,废话不多说了,直接上图,上代码了! 效果图如下: 没处理前: 处理之后: MainActivity.jav ...
- SDWebImage实现原理（怎么实现图片缓存器）
入口 setImageWithURL:placeholderImage:options: 会先把 placeholderImage 显示,然后 SDWebImageManager 根据 URL 开始处 ...
- Activiti入门 -- 环境搭建和核心API简介
相关文章: <史上最权威的Activiti框架学习指南> <Activiti入门 -- 轻松解读数据库> 本章内容,主要讲解Activiti框架环境的搭建,能够使用Activi ...
- 22、（转载）jQueryMobile 知识点总结
本文转自:http://www.cnblogs.com/jxyedu HTML5技术生态介绍 H5的现状与未来 HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准 ...
- 2、shader基本语法、变量类型、shader的三种形式、subshader、fallback、Pass LOD、tags
新建一个shader,名为MyShader1内容如下: 1._MainTex 为变量名 2.“Base (RGB)”表示在unity编辑面板中显示的名字,可以定义为中文 3.2D 表示变量的类型 4. ...
- 孤荷凌寒自学python第三十三天python的文件操作初识
孤荷凌寒自学python第三十三天python的文件操作初识 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 今天开始自学python的普通 文件操作部分的内容. 一.python的文件打开 ...
- 常见数据结构图文详解-C++版
目录 简介 一.数组 1. 静态数组 array 2. 动态数组 2.1. vector 2.2. priority_queue 2.3. deque 2.4. stack 2.5. queue二.单 ...