JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
时间:2019-03-30
本文章向大家介绍JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动),主要包括JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 一篇文章完全理解virtualenv
- Python运用蒙特卡洛算法模拟植物生长
- (57) 二进制文件和字节流 / 计算机程序的思维逻辑
- 真正的 Tornado 异步非阻塞
- (58) 文本文件和字符流 / 计算机程序的思维逻辑
- Python爬虫—破解JS加密的Cookie
- Python通过抓包和使用cookie爬取微博完全讲解
- (50) 剖析EnumMap / 计算机程序的思维逻辑
- 认识九大经典sql模式
- 构建一个pip安装的车辆路径显示的Python包
- 如何编写复杂sql
- Python机器学习工具:Scikit-Learn介绍与实践
- (51) 剖析EnumSet / 计算机程序的思维逻辑
- mysql性能优化的几条重要建议
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- iOS Abort 问题系统的解决方案
- 【jvm】01- java内存结构分析
- 【redis】01-redis简介
- 3000字详解四种常用的缺失值处理方法
- python学习笔记(7)——远程主机强迫关闭了一个现有的连接
- 【带你成为pyq最靓的仔】朋友圈九宫格(一)之图片切割篇
- Material Design Compoents 1.1.0
- 【第19期】HTTP请求头referer
- Sentinel流控日志与索引
- Next.js + TypeScript 搭建一个简易的博客系统
- 【redis】02-redis持久化存储以及对象存储
- Kubernetes 集群可视化监控之 Weave Scope 入门
- h5 与原生 app 交互的原理
- 怎么在Openresty中REST?
- 【redis】04-redis 根据监听key的失效事件实现订单超时关闭