原生js实现移动开发轮播图、相册滑动特效


Posted in Javascript onApril 17, 2015

使用方法:

分别引用css文件和js文件 如:

<link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" />
<script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script>

html:

<li><a href="/"><img src="img/1.jpg" /></a></li>
<li><a href="/"><img src="img/2.jpg" /></a></li>
<li><a href="/"><img src="img/3.jpg" /></a></li>

javascript:

window.onload=function(){
photoSlide({
wrap: document.getElementById('photo'),//最外层容器
loop: true,//设置无缝循环
autoPlay:true,//自动轮播
autoTime:4000,//轮播时间间隔
pagination:true //点状态列表
});
}

完整示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>photoSlider-纯js移动开发轮播图、相册滑动插件</title>
<meta name="keywords" content="javascript移动端相册轮播图手指滑动插件" />
<meta name="description" content="javascript移动端相册轮播图手指滑动插件,支持自定义轮播图滑动属性" />
<meta name=apple-mobile-web-app-title content="photoSlider">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name=renderer content=webkit>
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app">
<link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" />
</head>
<body>
<div id="photo">
<div id="loading" class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<ul id="pic-view" class="pic-view">
<li><a href="/"><img src="img/1.jpg" /></a></li>
<li><a href="/"><img src="img/2.jpg" /></a></li>
<li><a href="/"><img src="img/3.jpg" /></a></li>
</ul>
</div>
</body>
</html>
<script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
document.onreadystatechange = subSomething;
function subSomething() {
if (document.readyState == 'complete') {
setTimeout(function(){
var load=document.getElementById('loading');
load.style.opacity=0;
document.getElementById('pic-view').setAttribute('class','pic-view show');
load.remove();
},500);
}
}
window.onload=function(){
photoSlide({
wrap: document.getElementById('photo'),
loop: true,
autoPlay:true,
autoTime:4000,
pagination:true
});
}
</script>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript 私有成员分析
Jan 13 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
优雅的处理vue项目异常实战记录
Jun 05 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 #Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 #Javascript
JavaScript实现的简单幂函数实例
Apr 17 #Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 #Javascript
jQuery中toggle()函数的使用实例
Apr 17 #Javascript
JQuery实现可直接编辑的表格
Apr 16 #Javascript
JS中捕获console.log()输出的方法
Apr 16 #Javascript
You might like
德劲1103的维修打理经验
2021/03/02 无线电
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python解析xml中dom元素的方法
2015/03/12 Python
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
Python谱减法语音降噪实例
2019/12/18 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
顶撞领导检讨书
2014/01/29 职场文书
运动员入场词
2015/07/18 职场文书
Python闭包的定义和使用方法
2022/04/11 Python