移动web：图片切换(焦点图)
在web页面上图片切换（焦点图）效果实在是太常见了，PC端、移动端到处都有它的身影。
上次写了个tab选项卡的效果，在这里延续一下，改成图片切换的效果。
如果不需要自动播放，稍微修改下html标签、和css样式，tab选项卡JS里动画持续时间、去掉点击切换事件部分就可以了。
html
<div class="mslide" id="slide">
<ul class="mcontent">
<li><a href="#a1"><img src="data:images/01.jpg" /></a></li>
<li><a href="#a2"><img src="data:images/02.jpg" /></a></li>
<li><a href="#a3"><img src="data:images/03.jpg" /></a></li>
<li><a href="#a4"><img src="data:images/04.jpg" /></a></li>
</ul>
<ul class="mhead">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div><!-- End mslide -->
css
body,div,ul,li{margin:;padding:;}
ul,li{list-style: none;}
body{font-size: 100%; font-family: Helvetica,STHeiti,Droid Sans Fallback;}
.mslide {
position:relative;
width:100%;
overflow:hidden;
margin: 15px 0;
}
.mcontent {
width:100%;
overflow:hidden;
}
.mcontent li {
width:100%;
float:left;
}
.mcontent li img {
width:100%;
}
.mhead {
position:absolute;
bottom:5px;
left:;
z-index:;
text-align:center;
width:100%;
height:15px;
line-height:15px;
}
.mhead li {
display:inline-block;
width:10px;
height:10px;
border:1px solid #999;
border-radius:6px;
margin:0 3px;
overflow:hidden;
font-size:;
line-height:;
vertical-align: top;
background: transparent;
color:rgba(0,0,0,0);
}
.mhead li.current {
background:#F00;
}
JS
/**
* LBS mTabs (修改成图片切换)
* ===================================================
* opts.mtab tabs外围容器/滑动事件对象(一个CSS选择器)
* opts.mhead tabs标题容器/点击对象(一个CSS选择器)
* opts.mcontent tabs内容容器/滑动切换对象(一个CSS选择器)
* opts.index tabs索引(默认0) 指定显示哪个索引的标题、内容
* opts.current tabs当前项的类名(默认current)
* ===================================================
**/
;(function(){
window.mTabs = function(opts){
if(typeof opts === undefined) return; this.mtab = document.querySelector(opts.mtab);
this.mhead = document.querySelector(opts.mhead);
this.mcontent = document.querySelector(opts.mcontent); this.mheads = this.mhead.children;
this.mcontents = this.mcontent.children; this.length = this.mheads.length;
if(this.length < 1) return;
if(opts.index > this.length-1) opts.index = this.length-1;
this.index = this.oIndex = opts.index || 0;
this.current = opts.current || 'current';
this.touch = {}; this.init();
}
mTabs.prototype = {
init: function(opts){
this.set();
this.initset();
this.bind();
},
initset: function(){
for(var i = 0; i < this.length; i++){
this.mheads[i].index = i;
this.mheads[i].className = this.mheads[i].className.replace(this.current,'');
this.mcontents[i].className = this.mcontents[i].className.replace(this.current,'');
}
this.mheads[this.index].className += ' '+this.current;
this.mcontents[this.index].className += ' '+this.current;
//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + (-this.index * this.width) + "px)";
this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + (-this.index * this.width) + "px,0,0)";
},
set: function(){
this.width = document.documentElement.clientWidth || document.body.clientWidth;
this.mcontent.style.width = this.length * this.width + 'px';
for(var i = 0; i < this.length; i++) this.mcontents[i].style.width = this.width + 'px';
//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + (-this.index * this.width) + "px)";
this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + (-this.index * this.width) + "px,0,0)";
},
bind: function(){
var _this = this;
this.mtab.addEventListener("touchstart",function(e){
_this.touchStart(e);
}, false);
this.mtab.addEventListener("touchmove",function(e){
_this.touchMove(e);
}, false);
this.mtab.addEventListener("touchend",function(e){
_this.touchEnd(e);
}, false);
this.mtab.addEventListener("touchcancel",function(e){
_this.touchEnd(e);
}, false);
this.mcontent.addEventListener('webkitTransitionEnd',function(){
_this.transitionEnd();
}, false);
window.addEventListener("resize", function(){
setTimeout(function(){
_this.set();
},100);
}, false);
window.addEventListener("orientationchange",function(){
setTimeout(function(){
_this.set();
},100);
}, false);
},
touchStart: function(e){
this.touch.x = e.touches[0].pageX;
this.touch.y = e.touches[0].pageY;
this.touch.time = Date.now();
this.touch.disX = 0;
this.touch.disY = 0;
this.touch.fixed = '';
},
touchMove: function(e){
if(this.touch.fixed === 'up') return;
e.stopPropagation();
if(e.touches.length > 1 || e.scale && e.scale !== 1) return;
this.touch.disX = e.touches[0].pageX - this.touch.x;
this.touch.disY = e.touches[0].pageY - this.touch.y;
if(this.touch.fixed === ''){
if( Math.abs(this.touch.disY) > Math.abs(this.touch.disX) ){
this.touch.fixed = 'up';
}else{
this.touch.fixed = 'left';
}
}
if(this.touch.fixed === 'left'){
e.preventDefault();
if( (this.index === 0 && this.touch.disX > 0) || (this.index === this.length-1 && this.touch.disX < 0) ) this.touch.disX /= 4;
//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + ( this.touch.disX - this.index * this.width ) + "px)";
this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + ( this.touch.disX - this.index * this.width ) + "px,0,0)";
}
},
touchEnd: function(e){
if(this.touch.fixed === 'left'){
var _this = this, X = Math.abs(this.touch.disX);
this.mcontent.style.webkitTransition = this.mcontent.style.transition = 'all 400ms';
if( (Date.now() - this.touch.time > 100 && X > 10) || X > this.width/2 ){
this.touch.time = Date.now();
this.touch.disX > 0 ? this.index-- : this.index++;
this.index < 0 && (this.index = 0);
this.index > this.length - 1 && (this.index = this.length - 1);
if(this.index !== this.oIndex) this.replace();
}
//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + (-this.index * this.width) + "px)";
this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + (-this.index * this.width) + "px,0,0)";
}
},
transitionEnd: function(){
this.mcontent.style.webkitTransition = this.mcontent.style.transition = 'all 0ms';
},
replace: function(){
this.mheads[this.index].className += ' '+this.current;
this.mheads[this.oIndex].className = this.mheads[this.oIndex].className.replace(this.current,'').trim();
this.mcontents[this.index].className += ' '+this.current;
this.mcontents[this.oIndex].className = this.mcontents[this.oIndex].className.replace(this.current,'').trim();
this.oIndex = this.index;
}
}
}());
效果预览 (Chrome的移动模式、移动设备)
- 1
- 2
- 3
- 4
这个根据tab选项卡修改而成的图片切换能适应大部分web页面的需求。点击下载
现在来加上自动播放功能，在上面的html，css基础上做出一点修改，每次手动写入导航的指示的html标签太麻烦了，让程序来判断有几张图片，然后创建几个导航指示，这样html结构更简洁。
html
<div class="mslide" id="slideIMG">
<ul class="mcontent">
<li><a href="#a1"><img src="data:images/01.jpg" /></a></li>
<li><a href="#a2"><img src="data:images/02.jpg" /></a></li>
<li><a href="#a3"><img src="data:images/03.jpg" /></a></li>
<li><a href="#a4"><img src="data:images/04.jpg" /></a></li>
</ul>
</div><!-- End mslide -->
css
body,div,ul,li{margin:;padding:;}
ul,li{list-style: none;}
body{font-size: 100%; font-family: Helvetica,STHeiti,Droid Sans Fallback;}
.mslide {
position:relative;
width:100%;
overflow:hidden;
margin: 15px 0;
}
.mcontent {
width:100%;
overflow:hidden;
}
.mcontent li {
width:100%;
float:left;
}
.mcontent li img {
width:100%;
}
.mhead {
position:absolute;
bottom:5px;
left:;
z-index:;
text-align:center;
width:100%;
height:15px;
line-height:15px;
}
.mhead li {
display:inline-block;
width:10px;
height:10px;
border:1px solid #999;
border-radius:6px;
margin:0 3px;
overflow:hidden;
font-size:;
line-height:;
vertical-align: top;
background: transparent;
color:rgba(0,0,0,0);
}
.mhead li.current {
background:#F00;
}
JS代码和tab选项卡大部分相似，增加了自动播放、创建导航指示。
先贴JS出代码，供参考
/**
* LBS mSlideIMG 顺序版-自动
* Date: 2014-5-11
* ===================================================
* opts.mslide 外围容器/滑动事件对象(一个CSS选择器)
* opts.mcontent 内容容器/滑动切换对象(一个CSS选择器)
* opts.index 索引(默认0) 指定显示哪个索引的导航指示、图片项
* opts.navclass 导航容器的类名(默认mnav)
* opts.current 当前项的类名(默认current)
* opts.auto 是否自动播放 默认false
* opts.delay 自动播放间隔时间 默认5秒 自动播放时有效
* opts.duration 动画持续时间 默认400ms
* ===================================================
**/
;(function(){
window.mSlideIMG = function(opts){
if(typeof opts === undefined) return; this.mslide = document.querySelector(opts.mslide);
this.mcontent = document.querySelector(opts.mcontent);
this.mcontents = this.mcontent.children;
this.mnav = null;
this.mnavs = []; this.length = this.mcontents.length;
if(this.length < 1) return;
if(opts.index > this.length-1) opts.index = this.length-1;
this.index = this.oIndex = opts.index || 0; this.current = opts.current || 'current';
this.navclass = opts.navclass || 'mnav'; this.duration = opts.duration || 400;
this.auto = !!opts.auto || false;
this.auto && (this.delay = opts.delay || 5);
this.timer = null;
this.touch = {}; this.init();
}
mSlideIMG.prototype = {
init: function(opts){
this.set();
this.initset();
this.bind();
},
initset: function(){
this.create();
for(var i = 0; i < this.length; i++){
if(getComputedStyle(this.mcontents[i],null).position === 'absolute') this.mcontents[i].style.position = 'relative';
if(getComputedStyle(this.mcontents[i],null).cssFloat !== 'left') this.mcontents[i].style.cssFloat = 'left';
}
this.mnavs[this.index].className = this.current;
this.mcontents[this.index].className += ' '+this.current;
//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + (-this.index * this.width) + "px)";
this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + (-this.index * this.width) + "px,0,0)";
},
set: function(){
this.width = document.documentElement.clientWidth || document.body.clientWidth;
this.mcontent.style.width = this.length * this.width + 'px';
for(var i = 0; i < this.length; i++) this.mcontents[i].style.width = this.width + 'px';
//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + (-this.index * this.width) + "px)";
this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + (-this.index * this.width) + "px,0,0)";
},
create: function(){
this.mnav = document.createElement('ul'), li = null, i = 0;
for(; i < this.length; i++){
li = document.createElement('li');
li.innerHTML = i+1;
this.mnavs.push(li);
this.mnav.appendChild(li);
}
this.mnav.className = this.navclass;
this.mslide.appendChild(this.mnav);
},
bind: function(){
var _this = this;
this.mslide.addEventListener("touchstart",function(e){
_this.touchStart(e);
_this.auto && _this.stop();
}, false);
this.mslide.addEventListener("touchmove",function(e){
_this.touchMove(e);
_this.auto && _this.stop();
}, false);
this.mslide.addEventListener("touchend",function(e){
_this.touchEnd(e);
_this.auto && _this.start();
}, false);
this.mslide.addEventListener("touchcancel",function(e){
_this.touchEnd(e);
_this.auto && _this.start();
}, false);
this.mcontent.addEventListener('webkitTransitionEnd',function(){
_this.transitionEnd();
}, false);
window.addEventListener("resize", function(){
setTimeout(function(){
_this.set();
},100);
}, false);
window.addEventListener("orientationchange",function(){
setTimeout(function(){
_this.set();
},100);
}, false);
this.auto && this.start();
},
touchStart: function(e){
this.touch.x = e.touches[0].pageX;
this.touch.y = e.touches[0].pageY;
this.touch.time = Date.now();
this.touch.disX = 0;
this.touch.disY = 0;
this.touch.fixed = '';
},
touchMove: function(e){
if(this.touch.fixed === 'up') return;
e.stopPropagation();
if(e.touches.length > 1 || e.scale && e.scale !== 1) return;
this.touch.disX = e.touches[0].pageX - this.touch.x;
this.touch.disY = e.touches[0].pageY - this.touch.y;
if(this.touch.fixed === ''){
if( Math.abs(this.touch.disY) > Math.abs(this.touch.disX) ){
this.touch.fixed = 'up';
}else{
this.touch.fixed = 'left';
}
}
if(this.touch.fixed === 'left'){
e.preventDefault();
if( (this.index === 0 && this.touch.disX > 0) || (this.index === this.length-1 && this.touch.disX < 0) ) this.touch.disX /= 4;
//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + ( this.touch.disX - this.index * this.width ) + "px)";
this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + ( this.touch.disX - this.index * this.width ) + "px,0,0)";
}
},
touchEnd: function(e){
if(this.touch.fixed === 'left'){
var _this = this, X = Math.abs(this.touch.disX);
if( (Date.now() - this.touch.time > 100 && X > 10) || X > this.width/2 ){
this.touch.time = Date.now();
this.touch.disX > 0 ? this.index-- : this.index++;
this.index < 0 && (this.index = 0);
this.index > this.length - 1 && (this.index = this.length - 1);
if(this.index !== this.oIndex) this.replace();
}
this.mcontent.style.webkitTransition = this.mcontent.style.transition = 'all '+ this.duration +'ms';
//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + (-this.index * this.width) + "px)";
this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + (-this.index * this.width) + "px,0,0)";
}
},
transitionEnd: function(){
this.mcontent.style.webkitTransition = this.mcontent.style.transition = 'all 0ms';
},
replace: function(){
this.mnavs[this.index].className = this.current;
this.mnavs[this.oIndex].className = '';
this.mcontents[this.index].className += ' '+this.current;
this.mcontents[this.oIndex].className = this.mcontents[this.oIndex].className.replace(this.current,'').trim();
this.oIndex = this.index;
},
start : function(){
if(this.length < 2) return;
var _this = this;
this.timer = setInterval(function(){
_this.index++;
_this.index > _this.length - 1 && (_this.index = 0);
if(_this.index !== _this.oIndex) _this.replace();
_this.mcontent.style.webkitTransition = _this.mcontent.style.transition = 'all '+ _this.duration +'ms';
//_this.mcontent.style.webkitTransform = _this.mcontent.style.transform = "translateX(" + (-_this.index * _this.width) + "px)";
_this.mcontent.style.webkitTransform = _this.mcontent.style.transform = "translate3d(" + (-_this.index * _this.width) + "px,0,0)";
},this.delay*1000);
},
stop : function(){
clearInterval(this.timer);
this.timer = null;
}
}
}());
导航指示根据有几张图片来创建 (滑动切换容器ul.mcontent -> 包裹图片li标签，这里就是判断有几个li标签)
this.mcontent = document.querySelector(opts.mcontent);
this.mcontents = this.mcontent.children;
//..
this.length = this.mcontents.length;
//..
create: function(){
this.mnav = document.createElement('ul'), li = null, i = 0;
for(; i < this.length; i++){
li = document.createElement('li');
li.innerHTML = i+1;
this.mnavs.push(li);
this.mnav.appendChild(li);
}
this.mnav.className = this.navclass;
this.mslide.appendChild(this.mnav);
}
自动播放是间隔一段时间改变一个索引值来实现的，这个索引值在开始的时候默认定义为0。每间隔一段时间，这个索引值增加1。
this.index = this.oIndex = opts.index || 0;
//..
start : function(){
//..
this.timer = setInterval(function(){
_this.index++;
_this.index > _this.length - 1 && (_this.index = 0);
//..
_this.mcontent.style.webkitTransition = _this.mcontent.style.transition = 'all '+ _this.duration +'ms';
_this.mcontent.style.webkitTransform = _this.mcontent.style.transform = "translate3d(" + (-_this.index * _this.width) + "px,0,0)";
},this.delay*1000);
}
有时候要清除自动播放，当用手指来切换图片时，要清除自动播放，手指离开时又开始自动播放。
stop : function(){
clearInterval(this.timer);//清除定时
this.timer = null;
}
//..
this.mslide.addEventListener("touchstart",function(e){
_this.touchStart(e);
_this.auto && _this.stop(); //手指移入 如果有自动播放则清除
}, false);
this.mslide.addEventListener("touchend",function(e){
_this.touchEnd(e);
_this.auto && _this.start(); //手指离开 重新开始自动播放
}, false);
有时同一个web页面，有好几个图片切换，希望有的能定时自动切换，有的不用定时，为程序增加一个接口设置是否自动播放，顺便把间隔时间，切换动画持续时间一起定义了。
this.auto = !!opts.auto || false; //默认没有自动播放
this.auto && (this.delay = opts.delay || 5); //默认间隔时间5秒
this.duration = opts.duration || 400; //默认动画持续时间400毫秒
自动播放的图片切换，差不多完成了，来看下效果 (Chrome的移动模式、移动设备)。
说一些要注意的地方，外围容器(这里是类名为mslide的div标签)要设置相对或者绝对定位、并溢出隐藏；图片容器(这里是li标签)要浮动，为了都显示在一排滚动的容器(这里是类名为mcontent的ul标签)要足够宽；新建的导航指示是相对于外围容器绝对定位的，注意层级问题(这些能在样式里面定义就在样式里定义，程序为了全面可以多做判断)。
这个图片切换当最后一项切换到第一项时，动画跨度大，方向也和前几次相反，有时需要更自然的切换，方向都一样，每次动画距离也一样，这是一种进价的图片切换(焦点图)，也叫无缝切换。说下思路：可以采用绝对定位方式(这个例子里的li标签绝对定位，在li标签上做动画切换) ，根据索引值，在切换前修正位置，切换完成后修正位置；可以采用复制节点方式(复制这个例子里的li标签、全部或者部分)，根据索引值判断修正位置(这个例子里动画切换的对象和要修正位置对象是mcontent)。
可以看下效果：
实际上根据业务需求，会做出不同的改变，比如图片要切换到那一项时才加载，图片切换在页面没有html标签(解析JSON数据生成标签)……不管它怎么变，只要掌握基本的原理，问题都能解决。
移动web：图片切换(焦点图)的更多相关文章
- 一款基于jQuery的图片分组切换焦点图插件
这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实 ...
- 一款基于jQuery的图片下滑切换焦点图插件
之前为大家分享了好多款jquery插件,今天我们要分享的一款jQuery插件也比较实用,是一款jQuery焦点图插件.焦点图相当普通,一共可以循环播放4张图片,并且每一张图片在切换的时候都是向下滑动的 ...
- 一款基于jQuery多图切换焦点图插件
这次要给大家分享的也是一款jQuery图片滑块插件,之前有介绍过不少实用的jQuery焦点图插件和jQuery图片滑块插件,比如jQuery左侧Tab切换的图片滑块插件.它的特点是可以同时切换多张图片 ...
- jQuery手机触屏左右滑动切换焦点图特效代码
原文地址:http://www.17sucai.com/pins/4857.html 演示地址:http://www.17sucai.com/pins/demoshow/4857 干净演示地址:htt ...
- 3D 图片播放焦点图插件Adaptor
在线演示 本地下载
- 分享8个常用的jQuery焦点图插件
现在web网页jquery应用越来越广泛,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多初学者只需稍微 ...
- css3全屏背景图片切换特效
效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...
- 分享10款常用的jQuery焦点图插件
爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...
- 8款超绚丽的jQuery焦点图动画
随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...
随机推荐
- 14.3.4 Phantom Rows 幻影行
14.3.4 Phantom Rows 幻影行 所谓的幻读为发生在一个事务 当相同的查询产生不同的结果集在不同的时间. 比如,如果一个SELECT被执行2次, 但是第2次返回的记录不是第一次返回的记录 ...
- 3xx Redirection
3xx Redirection This class of status code indicates the client must take additional action to comple ...
- pinyin4j的使用
pinyin4j的使用 pinyin4j是一个功能强悍的汉语拼音工具包,主要是从汉语获取各种格式和需求的拼音,功能强悍,下面看看如何使用pinyin4j. import net.sourc ...
- win8 远程桌面 你得凭证不工作
今天在在登录azure远程桌面时,一直提示你的凭证不工作, 按照网上各种教程都不行, 后来发现在win8中用户名结构中,需要加上本机电脑名比如:“win8\administrator”.
- mysql 服务启动报1607 error
[问题说明] mysql曾经还是好好的,突然就不行了...不知道是否使用了腾讯C盘搬家工具引起的... watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2h ...
- 百度map android sdk3.5实现定位 并跳转的指定坐标，加入标记
前几天又下载了新的百度地图sdk,3.5版本号.发现百度地图api有了较大变化 定位和3.0版本号差点儿相同 可是设置地图中心和加入maker标记有较大变化 设置地图中心点 // 定义地图状态zoom ...
- Jersey框架二：Jersey对JSON的支持
Jersey系列文章: Jersey框架一:Jersey RESTful WebService框架简介 Jersey框架二:Jersey对JSON的支持 Jersey框架三:Jersey对HTTPS的 ...
- mahout源码KMeansDriver分析之五CIMapper
接上文重点分析map操作: Vector probabilities = classifier.classify(value.get());// 第一行 Vector selections = pol ...
- 【Java】运用JDBC实现一个注册、登录系统的编写
数据库的建立 首先,建立一个数据库,存储注册成功的账户信息. 其SQL的DDL语句如下: CREATE TABLE `jdbctest` ( `id` int(10) NOT NULL auto_in ...
- Learning Cocos2d-x for WP8（7）——让Sprite动起来
原文:Learning Cocos2d-x for WP8(7)--让Sprite动起来 C#(wp7)兄弟篇Learning Cocos2d-x for XNA(7)——让Sprite动起来 本讲将 ...