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 相关文章推荐
jquery中获取select选中值的代码
Jun 27 Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
node.js事件轮询机制原理知识点
Dec 22 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
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
基于Python实现文件大小输出
2016/01/11 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
网络安全方面的面试题
2016/01/07 面试题
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
学生的自我鉴定范文
2013/10/24 职场文书
初中生期末考试的自我评价
2013/12/17 职场文书
交通安全演讲稿
2014/01/07 职场文书
给老婆的婚前保证书
2014/02/01 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
社区活动总结
2015/02/04 职场文书
法院个人总结
2015/03/03 职场文书
2015年材料员工作总结
2015/04/30 职场文书
公司联欢会主持词
2015/07/04 职场文书
mysq启动失败问题及场景分析
2021/07/15 MySQL