原生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动态方法调用与参数修改的问题
Dec 10 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
jquery仿微信聊天界面
May 06 jQuery
Three.js基础学习教程
Nov 16 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
详解React之key的使用和实践
Sep 29 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 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
PHP 生成N个不重复的随机数
2015/01/21 PHP
php控制文件下载速度的方法
2015/03/24 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
php函数式编程简单示例
2019/08/08 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
python 中的int()函数怎么用
2017/10/17 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
便捷提取python导入包的属性方法
2018/10/15 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
Python txt文件如何转换成字典
2020/11/03 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
安全生产标语
2014/06/06 职场文书
学校班班通实施方案
2014/06/11 职场文书
部队2014年终工作总结
2014/11/27 职场文书
求职自我评价怎么写
2015/03/09 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL