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


Posted in Javascript onJanuary 19, 2017

废话不多说了,直接给大家贴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 点击滑动轮播实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
Javascript window对象详解
Nov 12 Javascript
Node.js+Express配置入门教程
May 19 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 #Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 #Javascript
js实现漫天星星效果
Jan 19 #Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 #Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 #Javascript
javaScript基础详解
Jan 19 #Javascript
bootstrap css样式之表单
Jan 19 #Javascript
You might like
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
Python编程中对文件和存储器的读写示例
2016/01/25 Python
python实现简单神经网络算法
2018/03/10 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
python3 flask实现文件上传功能
2020/03/20 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
pycharm创建一个python包方法图解
2019/04/10 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
Servlet的生命周期
2013/08/25 面试题
预备党员转正思想汇报
2014/09/26 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
商家认证委托书格式
2014/10/16 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
班主任培训研修日志
2015/11/13 职场文书
思想品德课教学反思
2016/02/24 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书