JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)


Posted in Javascript onJune 19, 2017

1、本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中)。

2、代码中的图片大家自己更换就可以了,样式和逻辑均写在js里。

3、html标签代码,js代码

<div class="slider">
  //轮播箭头
 <p class="lastpic"><img src="../images/prev.png"></p>
 <p class="nextpic"><img src="../images/next.png"></p>
 //轮播图片
 <ul id="slides" class="slides clearfix">
 <li><img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"></li>
 <li><img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"></li>
 <li><img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"></li>
 <li><img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"></li>
 </ul>
</div>
<script type="text/javascript">
  $(document).ready(function() {
  var len = $(".slider li").length-1;
  //给slider设置样式
  $(".slider").css({
   "width":"100%",
   "height": "inherit",
   "overflow": "hidden",
   "display":"inline-block"
  });
  
  //给ul设置宽度
  $(".slides").css({
   "position": "relative",
   "width":((len+1)*100).toString()+"%",
   "margin":"0",
   "padding":"0"});
  //给li设置百分比宽度
  $(".slides li").css({
   "width":(100/(len+1)).toString()+"%",
   "float":"left"
  });
  //给图片设置宽度
  $(".responsive").css({
   "width":"100%",
   "height":"inherit"
  });
  //控制点样式
  $(".slider p").css({
   "position": "absolute",
   "z-index":"999",
   "cursor": "pointer"
  });
  $(".slider .lastpic").css({
   "left":"0",
   "margin-top":"7%"
  });
  $(".slider .nextpic").css({
   "right":"0",
   "margin-top":"7%"
  });
  //animate移动
  var i = 0;
  $(".nextpic").click(function(){
   moveNext(i);
  });
  $(".lastpic").click(function(){
   moveLast(i);
  });
  //自动轮播
  var timer = setInterval(function(){
   moveNext(i);
  },5000);
  moveNext = function(n){
   if(n==len){
   i=-1;
   $(".slider .slides").animate({right: ""},800);
   }else{
   $(".slider .slides").animate({right:((n+1)*100).toString()+"%"}, 800);
   }
   i++;
  }
  moveLast = function(n){
   if(n==0){
   i=len+1;
   $(".slider .slides").animate({right:(len*100).toString()+"%"}, 800);
   }else{
   $(".slider .slides").animate({right:((n-1)*100).toString()+"%"}, 800);
   }
   i--;
  }
  //手机触摸效果
  var startX,endX,moveX;
  function touchStart(event){
   var touch = event.touches[0];
   startX = touch.pageX;
  }
  function touchMove(event){
   var touch = event.touches[0];
   endX = touch.pageX;
  }
  function touchEnd(event){
   moveX = startX - endX;
   if(moveX>50){
   moveNext(i);
   }else if(moveX<-50){
   moveLast(i);
   }
  }
  document.getElementById("slides").addEventListener("touchstart",touchStart,false);
  document.getElementById("slides").addEventListener("touchmove",touchMove,false);
  document.getElementById("slides").addEventListener("touchend",touchEnd,false);
  //transition移动固定宽度,无法自适应
  // $(".nextpic").click(function(){
  // if(i==len){
  //  i=-1;
  //  $(".slider .slides").css({
  //  'transition-timing-function':'linear',
  //  'transition-duration':'800ms',
  //  'transform':'translateX(0px)'
  //  })
  // }else{
  //  $(".slider .slides").css({
  //  'transition-timing-function':'linear',
  //  'transition-duration':'800ms',
  //  'transform':'translateX(-'+(i+1)*width+'px)'
  //  })
  // }
  // i++;
  // });
  // $(".lastpic").click(function(){
  // if(i==0){
  //  i=len+1;
  //  $(".slider .slides").css({
  //  'transition-timing-function':'linear',
  //  'transition-duration':'800ms',
  //  'transform':'translateX(-'+len*width+'px)'
  //  })
  // }else{
  //  $(".slider .slides").css({
  //  'transition-timing-function':'linear',
  //  'transition-duration':'800ms',
  //  'transform':'translateX(-'+(i-1)*width+'px)'
  //  })
  // }
  // i--;
  // })
  
  });
 </script>

以上所述是小编给大家介绍的JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 #Javascript
jQuery实现下拉菜单的实例代码
Jun 19 #jQuery
微信小程序实现皮肤功能(夜间模式)
Jun 18 #Javascript
关于javascript作用域的常见面试题分享
Jun 18 #Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 #Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 #Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 #Javascript
You might like
第七章 php自定义函数实现代码
2011/12/30 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
jQuery 对象中的类数组操作
2009/04/27 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
模拟select的代码
2011/10/19 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
从零学Python之hello world
2014/05/21 Python
浅谈Python中的数据类型
2015/05/05 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
工作自我评价分享
2013/12/01 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
客户答谢会致辞
2015/01/20 职场文书
校长师德表现自我评价
2015/03/05 职场文书
教学副校长工作总结
2015/08/13 职场文书