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对象和DOM对象的相互转化实现代码
Mar 02 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
thinkphp学习笔记之多表查询
2014/07/28 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
php中错误处理操作实例分析
2019/08/23 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
python 文件与目录操作
2008/12/24 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
成功的餐厅经营创业计划书
2014/01/15 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server