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 相关文章推荐
javascript学习随笔(使用window和frame)的技巧
Mar 08 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 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 数组的创建、调用和更新实现代码
2009/03/09 PHP
php SQL Injection with MySQL
2011/02/27 PHP
给ECShop添加最新评论
2015/01/07 PHP
php 问卷调查结果统计
2015/10/08 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
在javascript中实现函数数组的方法
2013/12/25 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
Python脚本实现下载合并SAE日志
2015/02/10 Python
解析Python中while true的使用
2015/10/13 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Django框架模板用法入门教程
2019/11/04 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
初一科学教学反思
2014/01/27 职场文书
租车协议书范本
2014/04/22 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
银行授权委托书样本
2014/10/13 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
Nginx反向代理、重定向
2022/04/13 Servers