photoSlider-原生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>
手机预览效果请扫描二维码：
学习来源：http://www.j--d.com/html/349.html
photoSlider-原生js移动开发轮播图、相册滑动插件的更多相关文章
- photoSlider-html5原生js移动开发轮播图-相册滑动插件
简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...
- 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 ...
随机推荐
- 关于.NET邮件的收发问题总结
转载:http://www.cnblogs.com/ustbwuyi/archive/2007/05/28/762581.html //取数据库中邮件信息中的最大发送时间,即最近接收到的一封邮件的时间 ...
- grunt入门之grunt watch的使用
watch几乎是grunt必不可少的应用,一旦配置好watch,保存文件后将立即执行命令 安装方式如下: npm install grunt-contrib-watch --save-dev 安装好以 ...
- 【M18】分期摊还预期的计算成本
1.基本思想就是:如果将来肯定要做某件事,并且这件事情耗时,提前把东西准备好,先做一部分.常用的使用场景有: 2.考虑一个大的数据集合,集合中元素不断变化.经常要取出里面的最大值,正常的做法是:每次调 ...
- 「译」JavaScript 的怪癖 1：隐式类型转换
原文:JavaScript quirk 1: implicit conversion of values 译文:「译」JavaScript 的怪癖 1:隐式类型转换 译者:justjavac 零:提要 ...
- C# API: 生成和读取Excel文件
我们想为用户提供一些数据,考虑再三, 大家认为对于用户(人,而非机器)的可读性, Excel文件要好一些. 因为相比csv,xml等文件, Excel中我们可以运用自动筛选, 窗口锁定, 还可以控制背 ...
- 搭建Spring + SpringMVC + Mybatis框架之一（创建项目）
创建项目 用maven管理项目很方便,不用手动下载jar包,直接在pom.xml配置文件中,maven可以帮助我们自动下载,非常方便 新建一个web project,添加maven支持就可以了,这样创 ...
- nicehair
https://github.com/lanyj189/nicehair https://github.com/eltld/nicehair https://github.com/pepoc/Cust ...
- TOJ3651确定比赛名次
确定比赛名次 Time Limit(Common/Java):1000MS/3000MS Memory Limit:65536KByte Total Submit: 23 ...
- 跟大家分享下今天所学到的PHP，虽然很基础，但是感觉也很重要
PHP:Hypertext PreProcessor(超文本预处理语言) PHP是一种服务器端语言(server-side language),服务器只发送脚本的输出,通常是HTML,PHP也可以用于 ...
- Servlet 3.0 新特性
Servlet 3.0 作为 Java EE 6 规范体系中一员,随着 Java EE 6 规范一起发布.该版本在前一版本(Servlet 2.5)的基础上提供了若干新特性用于简化 Web 应用的开发 ...