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键盘
May 02 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
关于React Native使用axios进行网络请求的方法
Aug 02 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中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
javascript中Function类型详解
2015/04/28 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
对numpy中shape的深入理解
2018/06/15 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
投标服务承诺书
2014/05/28 职场文书
医学求职自荐信
2014/06/21 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
地球上的星星观后感
2015/06/02 职场文书
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android