JS实现touch 点击滑动轮播实例代码

废话不多说了,直接给大家贴js代码了,具体代码如下所示:

<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/jQuery.mobile-1.3.2.min.js"></script>
----------------------需要应用jquery .mobile自行百度
.num-zcon{
  overflow: hidden;
  width:auto;
  height: 12.5em;
}
.num-container1 {
    height: 12.5em;
    background: url("icons/effect-img/13.png")no-repeat;
        background-size: cover;
    display:block;
  }
.num-container2 {
   height: 12.5em;
    background: url("icons/effect-img/15.png")no-repeat;        background-size: cover;
      display:none;
  }
  .num-container3 {
    height: 12.5em;
    background: url("icons/effect-img/177.png")no-repeat;
        background-size: cover;
      display:none;
  }
  .num-container4 {
    height: 12.5em;
    background: url("icons/effect-img/18.png")no-repeat;
        background-size: cover;
      display:none;
  }
  .num-container5 {
    height: 12.5em;
    background: url("icons/effect-img/19.png")no-repeat;
    background-size: cover;
    display:none;
  }
  .num-float{
    height:1em;
    margin:0 auto;
    z-index: 3;
    text-align:center;
    margin-top: -1.35em;
  }
  .num-a{
    background:#ffffff;
    height: 0.4375em;
    width: 0.4375em;
    border-radius: 50%;
    float: left;
    opacity: 0.5;
  }
   .num-kong{
    height: 0.625em;
    width: 0.25em;
    float: left;
  }
  .num-kong-width{
    width: auto;
    height: 0.9375em;
  }
  .num-kong-win{
    height: 0.625em;
    width: 0.1em;
    float: left;
  }
----------
<div class="num-zcon">
  <div class="num-container1" id="adv1">
  </div>
  <div class="num-container2" id="adv2">
  </div>
  <div class="num-container3" id="adv3">
  </div>
  <div class="num-container4" id="adv4">
  </div>
  <div class="num-container5" id="adv5">
  </div>
  <div class="num-float ub ub-ac ub-pc">
    <div class="num-a" id="ab1">
    </div>
    <div class="num-kong">
    </div>
    <div class="num-a" id="ab2">
    </div>
    <div class="num-kong">
    </div>
    <div class="num-a" id="ab3">
    </div>
    <div class="num-kong">
    </div>
    <div class="num-a" id="ab4">
    </div>
    <div class="num-kong">
    </div>
    <div class="num-a" id="ab5">
    </div>
  </div>
</div>
<script>
  //横幅广告;
  var Nownumber = 1;//1图;
  var Maxnumber = 5;//总个数;
  function show() {
    for (var i = 1; i <= Maxnumber; i++) {
      if (Nownumber == i) {
        document.getElementById("adv" + Nownumber).style.display = 'block';
        document.getElementById("ab" + Nownumber).style.opacity = 1;
      }
      else {
        document.getElementById("adv" + i).style.display = 'none';
        document.getElementById("ab" + i).style.opacity = 0.5;
        document.getElementById("adv" + i).style.transition = "1s";
      }
    }
    if (Nownumber == Maxnumber) {
      Nownumber = 1;
    }
    else {
      Nownumber++;
    }
  }
  theTime = setInterval('show()', 5000);
</script>
<script>
$(document).on("pageinit","#pageone",function(){
 $("#adv1").on("swiperight",function(){
  $(this).hide();
  Nownumber=5;
  $("#adv5").show();
 });
 $("#adv5").on("swiperight",function(){
  $(this).hide();
  Nownumber=4;
  $("#adv4").show();
 });
 $("#adv4").on("swiperight",function(){
  $(this).hide();
  Nownumber=3;
  $("#adv3").show();
 });
 $("#adv3").on("swiperight",function(){
  $(this).hide();
  Nownumber=2;
  $("#adv2").show();
 });
 $("#adv2").on("swiperight",function(){
  $(this).hide();
  Nownumber=1;
  $("#adv1").show();
 });
 $("#adv1").on("swipeleft",function(){
  $(this).hide();
  Nownumber=2;
  $("#adv2").show();
  });
 $("#adv2").on("swipeleft",function(){
  $(this).hide();
  Nownumber=3;
  $("#adv3").show();
  });
 $("#adv3").on("swipeleft",function(){
  $(this).hide();
  Nownumber=4;
  $("#adv4").show();
  });
 $("#adv4").on("swipeleft",function(){
  $(this).hide();
  Nownumber=5;
  $("#adv5").show();
  });
 $("#adv5").on("swipeleft",function(){
  $(this).hide();
  Nownumber=1;
  $("#adv1").show();
});
});
</script>

以上所述是小编给大家介绍的JS实现touch 点击滑动轮播实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 浅谈移动端之js touch事件 手势滑动事件

    现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向. 具体代码如下: $("body").on("touchstart", function(e) { e.preventDefault(); startX = e.

  • javascript移动开发中touch触摸事件详解

    事件对象是用来记录一些事件发生时的相关信息的对象.事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁! W3C DOM把事件对象作为事件处理函数的第一个参数传入进去 IE将事件对象作为window对象的一个属性(相当于全局变量) originalEvent对象 在一次偶然的使用中,我发现当使用on()函数并且传入第二个选择器参数时,e.touches[0]的访问为undefined,打印e发现,它的事件对象不是原生的事件对象.经查阅发现

  • js实现支持手机滑动切换的轮播图片效果实例

    本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

  • javascript经典特效分享 手风琴、轮播图、图片滑动

    最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 纯css的手风琴: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴css</title> <style> .showBox{ width: 660px; overflow: hidden; } ul{ list-style:

  • js实现touch移动触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发,这个好像比较少用 每个触摸事件被触发

  • 原生js实现移动开发轮播图、相册滑动特效

    使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script

  • javascript移动设备Web开发中对touch事件的封装实例

    在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现. zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 tap 事件在某些安卓设备上存在事件穿透的 bug,其他类型的事件也或多或少的存在一些兼容性问题. 于是乎,干脆自己动手对这些常用的手势事件进行了封装,由于没有太多真实的设备来进行测试,可能存在一些兼容性问题,下面的代码也只是在 iOS 7.Andorid 4 上的一些比较常见的浏览器中测试通过. t

  • js的touch事件的实际引用

    一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索jquery 的相应技术支持实在繁琐(当然也可能是我对jquery的理解不够),而js只需几步简单定义即可. 由于对js的了解比较少,最简单的应用我都试了很久--下面就分享下js的touch事件的实际引用: $(function(){ document.addEventListener("touchm

  • JS实现touch 点击滑动轮播实例代码

    废话不多说了,直接给大家贴js代码了,具体代码如下所示: <script src="../js/jquery-1.8.3.min.js"></script> <script src="../js/jQuery.mobile-1.3.2.min.js"></script> ----------------------需要应用jquery .mobile自行百度 .num-zcon{ overflow: hidden; w

  • JS实现分页浏览横向图片(类轮播)实例代码

    昨天朋友问我怎么用js实现分页浏览横向图片功能,其实实现代码很简单的,下面小编给大家带来了具体实现代码,代码如下所示: common.js function $(id) { return document.getElementById(id); } function $_tag(tag) { return document.getElementsByTagName(tag); } index.html <!DOCTYPE html> <html lang="en"&g

  • js带缩略图的图片轮播效果代码分享

    本文实例讲述了js带缩略图的图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javaScript实现带缩略图的图片轮播特效代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/jb51.net.css" rel="stylesheet" type=&q

  • Vue.js动态添加、删除选题的实例代码

    大家先看看页面效果吧,当当当当``````````````````````` 图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题. html代码 <template> <div class="main-container"> <div class="form-horizontal"> <temp

  • 简单的jQuery banner图片轮播实例代码

    朋友给我看了一个轮播效果,把js下载一看,丫丫的一个这么简单的效果,这么的就能写个几百行的,严重影响浏览器加载速度嘛,以为人家宽带流量不要钱玩的哦..无奈之下给他写了个简单的,把所有代码放上去都没有超过70行,还有圆角的那个CSS,不是每个浏览器都是圆角的,不过不影响美观,嘻嘻. 先给大家展示下效果图: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title&

  • JS非行间样式获取函数的实例代码

    行间样式:元素内部用style定义的样式,如:<div style="width:200px;"></div> 非行间样式:在<style></style>内通过css定义的样式 先看一段出问题的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </

  • JS实现移动端整屏滑动的实例代码

    基本思路: 1)检测手指滑动方向:获取手指抬起时的位置,减去手指按下时的位置,得正即为向下滑动了 2)手指抬起后,向对应反向操作改变当前页的位置 具体代码如下: html <div id="wrap"> <div id="page01" class="pages">第一屏</div> <div id="page02" class="pages">第二屏<

  • JS获取和修改元素样式的实例代码

    1.获取元素样式: 可以通过元素的style属性,获取元素行内样式.style属性是一个对象,包括一系列样式属性.例如:color, backgourdColor. 上面讲的通过style属性获取元素样式,不推荐使用. 下面的一段代码,可以获取元素运行时的样式,即全局的样式.这种方式可以动态获取元素的样式,例如元素大小. // node:将要获取其计算样式的元素节点 // attr: 样式属性名称 function getCurrentStyle(node, attr) { var style

  • 用原生JS对AJAX做简单封装的实例代码

    首先,我们需要xhr对象.这对我们来说不难,封装成一个函数. var createAjax = function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("microsoft.xmlhttp"); } catch (e1) { try { //非IE浏览器 xhr = new XMLHttpRequest(); } catch (e2) { window.alert("您的浏览器不支持ajax,请

  • JS创建事件的三种方法(实例代码)

    1.普通的定义方式 <input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色','红色',' 提示框 '); if(Sfont=='红色'){ form1.style.fontFamily='黑体'; form1.style.color='red'; }" /> 这是最常见的一种定义方式,直接将JS事件定义在需要的

随机推荐