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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
List the Codec Files on a Computer
Jun 11 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 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连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
JS字符串截取函数实例
2013/12/27 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
nodejs教程之入门
2014/11/21 NodeJs
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
Python是怎样处理json模块的
2020/07/16 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
材料物理专业大学毕业生求职信
2013/10/15 职场文书
通信工程毕业生自荐信
2013/11/01 职场文书
营销人才自我鉴定范文
2013/12/25 职场文书
股权投资意向书
2014/04/01 职场文书
活动总结格式
2014/08/30 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
高校教师个人总结
2015/02/10 职场文书
感恩教师主题班会
2015/08/12 职场文书
小学校本教研总结
2015/08/13 职场文书
纪律委员竞选稿
2015/11/19 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书