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 相关文章推荐
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
Javascript writable特性介绍
Feb 27 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
JS实现轮播图效果
Jan 11 Javascript
vue 单页应用和多页应用的优劣
Oct 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
php递归列出所有文件和目录的代码
2008/09/10 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
JS与C#编码解码
2013/12/03 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
Python封装shell命令实例分析
2015/05/05 Python
python生成二维码的实例详解
2017/10/29 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
Python使用贪婪算法解决问题
2019/10/22 Python
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
交通违章检讨书
2014/09/21 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
电视新闻稿
2015/07/17 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL