手机移动端无缝滚动焦点图代码轮播滚动切换特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是手机移动端无缝滚动焦点图代码轮播滚动切换特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为手机移动端无缝滚动焦点图代码" />
<title>手机移动端无缝滚动焦点图代码</title>
    <!--demo展示所用css，不用关心 begin-->
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <!--demo展示所用css end-->
    <!--组件依赖css begin-->
    <link rel="stylesheet" type="text/css" href="css/widget/slider/slider.css" />
    <link rel="stylesheet" type="text/css" href="css/widget/slider/slider.default.css" /> <!--皮肤文件，若不使用该皮肤，可以不加载-->
    <!--组件依赖css end-->
    <!--组件依赖js begin-->
    <script type="text/javascript" src="js/zepto.js"></script>
	<script type="text/javascript" src="js/mobileevent2pc.js"></script>		<!-- 此JS作用：在PC端方便查看效果，用在手机端时，可不引用 -->
    <script type="text/javascript" src="js/touch.js"></script>      <!--新版zepto合并版中不包括touch.js-->
    <script type="text/javascript" src="js/zepto.extend.js"></script>
    <script type="text/javascript" src="js/zepto.ui.js"></script>
    <script type="text/javascript" src="js/widget/slider.js"></script>
    <!--组件依赖js end-->
</head>
<body>

<!-- 代码 开始 -->

<div id="slider">
    <div>
        <a href="#" ><img lazyload="images/pic_1.jpg"></a>
        <p>1.让Coron的太阳把自己晒黑&mdash;小天</p>
    </div>
    <div>
        <a href="#" ><img lazyload="images/pic_2.png"></a>
        <p>2.让Coron的太阳把自己晒黑&mdash;小天</p>
    </div>
    <div>
        <a href="#" ><img lazyload="images/pic_3.png"></a>
        <p>3.让Coron的太阳把自己晒黑&mdash;小天</p>
    </div>
    <div>
        <a href="#" ><img lazyload="images/pic_4.jpg"></a>
        <p>4.让Coron的太阳把自己晒黑&mdash;小天</p>
    </div>
</div>
<script>
    //创建slider组件
    $('#slider').slider({loop:true});
</script>
<style type="text/css">
.my_info{ border-top:2px solid #eee; padding:10px 0; margin-top:30px;}
.my_info p{ text-align:center; font:normal 12px/30px 'MicroSoft YaHei';}
</style>
</body>
</html>

JS代码(touch.js):

/** * @import core/zepto.js */
// Zepto.js// (c) 2010-2012 Thomas Fuchs// Zepto.js may be freely distributed under the MIT license.;
	(function($){
	var touch ={
}
,touchTimeout,tapTimeout,swipeTimeout,longTapDelay = 750,longTapTimeout function parentIfText(node){
	return 'tagName' in node ? node:node.parentNode}
function swipeDirection(x1,x2,y1,y2){
	var xDelta = Math.abs(x1 - x2),yDelta = Math.abs(y1 - y2) return xDelta >= yDelta ? (x1 - x2 > 0 ? 'Left':'Right'):(y1 - y2 > 0 ? 'Up':'Down')}
function longTap(){
	longTapTimeout = null if (touch.last){
	touch.el.trigger('longTap') touch ={
}
}
}
function cancelLongTap(){
	if (longTapTimeout) clearTimeout(longTapTimeout) longTapTimeout = null}
function cancelAll(){
	if (touchTimeout) clearTimeout(touchTimeout) if (tapTimeout) clearTimeout(tapTimeout) if (swipeTimeout) clearTimeout(swipeTimeout) if (longTapTimeout) clearTimeout(longTapTimeout) touchTimeout = tapTimeout = swipeTimeout = longTapTimeout = null touch ={
}
}
$(document).ready(function(){
	var now,delta $(document.body) .bind('touchstart',function(e){
	now = Date.now() delta = now - (touch.last || now) touch.el = $(parentIfText(e.touches[0].target)) touchTimeout && clearTimeout(touchTimeout) touch.x1 = e.touches[0].pageX touch.y1 = e.touches[0].pageY if (delta > 0 && delta <= 250) touch.isDoubleTap = true touch.last = now longTapTimeout = setTimeout(longTap,longTapDelay)}
) .bind('touchmove',function(e){
	cancelLongTap() touch.x2 = e.touches[0].pageX touch.y2 = e.touches[0].pageY if (Math.abs(touch.x1 - touch.x2) > 10) e.preventDefault()}
) .bind('touchend',function(e){
	cancelLongTap() // swipe if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) || (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30)) swipeTimeout = setTimeout(function(){
	touch.el.trigger('swipe') touch.el.trigger('swipe' + (swipeDirection(touch.x1,touch.x2,touch.y1,touch.y2))) touch ={
}
}
,0) // normal tap else if ('last' in touch) // delay by one tick so we can cancel the 'tap' event if 'scroll' fires // ('tap' fires before 'scroll') tapTimeout = setTimeout(function(){
	// trigger universal 'tap' with the option to cancelTouch() // (cancelTouch cancels processing of single vs double taps for faster 'tap' response) var event = $.Event('tap') event.cancelTouch = cancelAll touch.el.trigger(event) // trigger double tap immediately if (touch.isDoubleTap){
	touch.el.trigger('doubleTap') touch ={
}
}
// trigger single tap after 250ms of inactivity else{
	touchTimeout = setTimeout(function(){
	touchTimeout = null touch.el.trigger('singleTap') touch ={
}
}
,250)}
}
,0)}
) .bind('touchcancel',cancelAll) $(window).bind('scroll',cancelAll)}
);
	['swipe','swipeLeft','swipeRight','swipeUp','swipeDown','doubleTap','tap','singleTap','longTap'].forEach(function(m){
	$.fn[m] = function(callback){
	return this.bind(m,callback)}
}
)}
)(Zepto);

CSS代码(reset.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video,input{margin:0;padding:0;border:none;outline:0;font-size:100%;font:inherit;vertical-align:baseline;}
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{-webkit-text-size-adjust:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{font-family:arial,sans-serif;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}

附件:下载该文件资源,减少时间成本(增值服务)