photoSlider-html5原生js移动开发轮播图-相册滑动插件
简单的移动端图片滑动切换浏览插件
分别引用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="http://www.j--d.com"><img src="img/1.jpg" /></a></li>
<li><a href="http://www.j--d.com"><img src="img/2.jpg" /></a></li>
<li><a href="http://www.j--d.com"><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="http://www.j--d.com"><img src="img/1.jpg" /></a></li>
<li><a href="http://www.j--d.com"><img src="img/2.jpg" /></a></li>
<li><a href="http://www.j--d.com"><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>
photoSlider-html5原生js移动开发轮播图-相册滑动插件的更多相关文章
- photoSlider-原生js移动开发轮播图、相册滑动插件
详细内容请点击 在线预览 立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- 原生 js 左右切换轮播图
使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...
- 原生JS实现旋转木马轮播图特效
大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...
- 原生js写简单轮播图方式１－从左向右滑动
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...
- 用 JS 写 （轮播图 / 选项卡 / 滑动门）
页面中经常会用到各式各样的轮播图,今天贺贺为大家介绍一种常用的方法,对于JS我们需要举一反三,一种方法可以对多个轮播样式进行渲染. <head> <meta charset=&quo ...
随机推荐
- 命令提示符CMD远程连接Mysql学习笔记
我想要用Cmd可以像SecureCRT一样远程连接数据库,查询数据,因为用cmd的话可以用批处理,方便脚本调用 第一步:直接使用命令 mysql –h ip –u user –p,本地运行了该命令提示 ...
- MySQL binlog_rows_query_log_events
当binlog_format=statement的时候进制日志只记录的是SQL语句,当binlog_fromat=row的时候记录的是event,如果想要在row模式的情况下 也记录SQL语句:bin ...
- Cisco Anyconnect Secure Mobility Client
Backup 进入安装文件目录cd anyconnect-3.1.00495/binary 安装sudo./vpnsetup.sh 查看安装情况ps aux | grep cisco 在搜索中, ...
- 开源 一行代码实现多形式多动画的推送小红点WZLBadge(iOS)－备用
更新日志 V1.2 2015.09.25 1.UITabBarItem badge is supproted; 2.Enable change badge properties when badge ...
- android 中View, Window, Activity, WindowManager，ViewRoot几者之间的关系
(1)View:最基本的UI组件,表示屏幕上的一个矩形区域. (2)Window: 表示一个窗口,不一定有屏幕那么大,可以很大也可以很小: 它包含一个V ...
- C#中使用SendMessage进行进程通信的实例
原文:C#中使用SendMessage进行进程通信的实例 1 新建解决方案SendMessageSecondExample 在解决方案下面新建两个项目:Sender和Receiver,两者的输出类型均 ...
- VS2010 Command Prompt Error:Cannot determine the location of the VS Common Tools folder
就在VS2010 Command Prompt 用vcvarsall.bat x64重新设置环境变量的时候,出现了标题中的错误.原因就在参考链接中 References: http://stackov ...
- windows上安装winsshd
winsshd下载地址:http://www.bitvise.com/ssh-server-download 安装后默认配置即可使用:
- VS项目如何添加到svn
SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.这里就讲一下VS2010如何将项目导入SVN版本控制. 工具 ...
- puppet证书重申