<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

<meta name="applicable-device" content="mobile" />

<meta content="yes" name="apple-mobile-web-app-capable"/>

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<meta content="telephone=no" name="format-detection"/>

<title>无标题文档</title>

</head>

<style>

*{ font-size:14px; padding:0; margin:0;}

.tab{ margin:10px;}

.tit{ height:30px; width:100%; border:1px solid #ccc; line-height:30px;}

.tit span{ display:inline-block; height:30px; line-height:30px; width:24%; border-right:1px solid #ccc; text-align:center}

.tit .cur{ color:#fff; background-color:#ccc;}

ul{overflow:hidden;zoom:1; width:300px; float:left}

ul li{ height:30px; line-height:30px; white-space:nowrap; overflow:hidden}

.tab-wrap{ position:relative; height:150px; overflow:hidden;zoom:1;}.tab-main{ position:absolute; left:0px; top:0px;}

</style>

<body>

<div class="tab" id="tap">

    <div class="tit"><span class="cur">新闻</span><span>体育</span><span>娱乐</span><span>文化</span></div>

    <div class="tab-wrap">

        <div class="tab-main">

            <ul class="current">

                <li>新闻新闻新闻新闻新闻新闻新闻新闻新闻</li>

                <li>新闻新闻新闻新闻新闻新闻新闻新闻新闻</li>

                <li>新闻新闻新闻新闻新闻新闻新闻新闻新闻</li>

                <li>新闻新闻新闻新闻新闻新闻新闻新闻新闻</li>

                <li>新闻新闻新闻新闻新闻新闻新闻新闻新闻</li>

            </ul>

            <ul>

                <li>体育体育体育体育体育体育体育体育体育</li>

                <li>体育体育体育体育体育体育体育体育体育体育体育体育</li>

                <li>体育体育体育体育体育体育体育体育体育体育</li>

                <li>体育体育体育体育体育体育体育体育体育体育</li>

                <li>体育体育体育体育体育体育体育体育体育体育体育</li>

            </ul>

            <ul>

                <li>娱乐娱乐娱乐娱乐娱乐娱乐娱乐</li>

                <li>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</li>

                <li>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</li>

                <li>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</li>

                <li>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</li>

            </ul>

            <ul>

                <li>文化文化文化文化文化文化文化文化文化文化文化</li>

                <li>文化文化文化文化文化文化文化文化文化文化</li>

                <li>文化文化文化文化文化文化文化文化文化文化</li>

                <li>文化文化文化文化文化文化文化文化文化文化文化文化</li>

                <li>文化文化文化文化文化文化文化文化文化文化</li>

            </ul>

        </div>

    </div>

</div>

<script src="js/jquery.js"></script>

<script>

$('ul').width($(window).width()-20);

var oulWidth=$('ul').width();

var oulLength=$('ul').length;

var timer=null;

var i=0;

var j=0;

$('.tab-main').width(oulWidth*oulLength);

$(".tab-main").on("touchstart", function(e) {

    e.preventDefault();

	clearInterval(timer)

    startX = e.originalEvent.changedTouches[0].pageX,

    startY = e.originalEvent.changedTouches[0].pageY;

});

$(".tab-main").on("touchmove", function(e) {

    e.preventDefault();

    moveEndX = e.originalEvent.changedTouches[0].pageX,

    moveEndY = e.originalEvent.changedTouches[0].pageY,

    X = moveEndX - startX,

    Y = moveEndY - startY;

});

$(".tab-main").on("touchend", function(e) {

    e.preventDefault();//阻止默认触屏滑动

    if ( Math.abs(X) > Math.abs(Y) && X > 0 ) { //向左

       if(i==0){

		   i=oulLength-1;

		   $('.tab-main ul').eq(i).css({'position':'relative','left':-oulWidth*oulLength+'px'});

	   }else{

		   i--

	   };

	   j--;

	   $('.tab-main').animate({'left':-j*oulWidth});

	   $('.tit span').eq(j).addClass('cur').siblings().removeClass('cur');

       $('.tab-main').stop().animate({'left':-j*oulWidth+'px'},function(){

		   if(i==oulLength-1){

			   $('.tab-main ul').eq(oulLength-1).css({'position':'static'});

			   $('.tab-main').css('left',-oulWidth*(oulLength-1));

			   j=oulLength-1;

		   };

	   });

    }else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {//向右

       rightAuto()

    }else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {//向下

        alert("top 2 bottom");

    }else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {//向上

        alert("bottom 2 top");

    }else{//点击

        alert("just touch");

    };

	timer=setInterval(rightAuto,5000);

});

	//右滚动函数

    function rightAuto(){

		 if(i==oulLength-1){

		  i=0;

		  $('.tab-main ul').eq(0).css({'position':'relative','left':oulWidth*oulLength+'px'});

	   }else{

		  i++

	   };

	   j++

	   $('.tab-main').animate({'left':-j*oulWidth});

	   $('.tit span').eq(i).addClass('cur').siblings().removeClass('cur');

       $('.tab-main').stop().animate({'left':-j*oulWidth+'px'},function(){

		   if(i==0){

			   $('.tab-main ul').eq(0).css({'position':'static'});

			   $('.tab-main').css('left',0);

			   j=0;

		   };

	   })

	};

	//定时轮播

	timer=setInterval(rightAuto,5000);

</script>

</body>

</html>

　

步骤解释：

　1.主要运用touchstart,touchmove,touchend三个事件；当touched结束时根据滑动的距离执行判断

Math.abs(X) > Math.abs(Y) 是向左右，向右，上，下，当然写在次出还有些bug，因为滑动屏幕的时候不会很直，会斜上或者斜下，因此加上“&& X < 0 ”判断更准确一些；

2.有了判断结果，然后根据相应的结果写出滑动的效果，此处我觉得和pc写法差别不大；

3. 然后就是定时滚动，此处和pc也不是很大区别，最后一点就是当进行touchstart的时候，clearInterval(timer)清除定时器，当touchend的时候，再进行滚动

ok,在此基本完成

jquery 触屏滑动+定时滚动的更多相关文章

  1. 朋友圈常见单页面触屏滑动上下翻屏功能jQuery实现

    翻页插件:实现原理,用margin-top来控制页面容器位置来实现上下翻页.margin这属性很好用,可以用来制作侧栏动画滑出菜单(左菜单,右内容,控制两者的margin实现):或者head下滑菜单 ...

  2. TouchSlide 触屏滑动特效插件

    TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端,能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. 插件开源.体积小.简单实用.功能强大,是 ...

  3. touch移动触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  4. JS移动客户端--触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  5. jquery触屏幻灯片

    一.前言 去年接触了移动Web开发,做了些手机端的网站及应用,还有些小的微信游戏和活动页面.每个项目里或多或少的都会有一些触屏事件等.其中有两个用到了jquery触屏幻灯片.刚开始的时候也在百度上搜索 ...

  6. JS移动客户端--触屏滑动事件 banner图效果

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  7. JS案例之5——移动端触屏滑动

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  8. js实现touch移动触屏滑动事件

    在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类 似的对象).这个对象封装一次屏幕触摸,一般来自于手指. ...

  9. 移动端触屏滑动，JS事件

    先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等 ...

随机推荐

  1. unity3D实际的原始视频游戏开发系列讲座10它《战斗：外来入侵》在第一季度游戏开发

    解说文件夹 <保卫战:异形入侵>游戏开发 第一讲   游戏演示和资源的介绍 第二讲  "异形"怪物的实现 第三讲  "异形"怪物生命值的体现 第四讲 ...

  2. NSIS：卸载加密码示例

    原文 NSIS:卸载加密码示例 最近有几个同学问我关于卸载时加密码的问题,其实很简单,懂点基础就可以根据安装加密码那篇文章http://www.flighty.cn/html/bushu/201009 ...

  3. android(9)_数据存储和访问3_scard基本介绍

    使用Activity的openFileOutput()保存文件的方法,文件存储在手机空间,通常情况下,手机的存储空间不是很大,存储小文件确定.假设你要存储大文件,如视频,是不可行. 对于这样大的文件, ...

  4. BZOJ 2115 Wc2011 Xor DFS+高斯消元

    标题效果:鉴于无向图.右侧的每个边缘,求一个1至n路径,右上路径值XOR和最大 首先,一个XOR并能为一个路径1至n简单的路径和一些简单的XOR和环 我们开始DFS获得随机的1至n简单的路径和绘图环所 ...

  5. web架构设计经验分享（转）

    本人作为一位web工程师,着眼最多之处莫过于 性能与架构,本次幸得参与sd2.0大会,得以与同行广泛交流,于此二方面,有些心得,不敢独享,与众博友分享,本文是这次参会与众同撩交流的心得,有兴趣者可以查 ...

  6. debian(wheezy) chrome beta 38.0.2x.xxx Shockwave Flash was crashed 该解决方案崩溃.

    版本号chrome beta升级到38.0.2x.xxx什么时候, flash他挂了. 调试 ./libpepflashplayer.so: /lib/x86_64-linux-gnu/libc.so ...

  7. 批处理添加iis wpg、users对IIS的访问权限

    原文 批处理添加iis wpg.users对IIS的访问权限 上一篇,我们学习了如何使用批处理删除各种帐户在IIS中的访问权限.下面,我们来看看,如何通过批处理添加iis_wpg.users对IIS的 ...

  8. dp related problems (update continuously)

    Leetcode Maximum Product Subarray 这个问题是说给一个整数数组.求最大连续子阵列产品. 纠结了包括阵列中的很长一段时间0而如何处理负数,关键的事实是,负治疗,所以我们录 ...

  9. SimpleInjector与MVC4集成，与Web Api集成，以及通过属性注入演示

    SimpleInjector与MVC4集成,与Web Api集成,以及通过属性注入演示   1,与MVC集成 见http://simpleinjector.codeplex.com/wikipage? ...

  10. linux_inux中find批量删除空文件及空文件夹脚本

    1.{}和之间有一个空格 2.find . -name 之间也有空格 3.exec 是一个后续的命令,{}内的内容代表前面查找出来的文件 linux下批量删除空文件(大小等于0的文件)的方法 rm - ...