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 ...
随机推荐
- web前端—工作周报
2016.07.25-2016.07.29周报: 1.本周工作主要内容: A:完成了宏视云h5播放器升级及大数据上报: B:修复xk-h5播放器bug:在三星手机自带浏览器无法进行滑动seek; C ...
- C++的优秀特性6：智能指针
(转载请注明原创于潘多拉盒子) 智能指针(Smart Pointer)是C++非常重要的特性.考虑如下一段使用简单指针(Plain Pointer)的代码: A* a = new A(); B* b ...
- VCL -- Understanding the Message-Handling System
Understanding the Message-Handling System http://docwiki.embarcadero.com/RADStudio/XE7/en/Understand ...
- 【转】网络中的AS自治域
1. 什么是AS自治域? 全球的互联网被分成很多个AS 自治域,每个国家的运营商.机构.甚至公司等都可以申请AS号码,AS号码是有限的,最大数目是65536.各自分配的IP地址被标清楚属于哪个AS号码 ...
- javascript优化
javaScript是一门解释性的语言.它不像java.C#等程序设计语言.由编译器先进行编译再运行.而是直接下载到用户的客户端进行执行.因此代码本身的优劣就直接决定了代码下载的速度以及执行的效率. ...
- Codeforces Beta Round #13 E. Holes 分块暴力
E. Holes Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/13/problem/E Des ...
- UVA 10025 (13.08.06)
The ? 1 ? 2 ? ... ? n = k problem Theproblem Given the following formula, one can set operators '+ ...
- Spark SQL - DataFrame
1 Overview Spark SQL is a Spark module for structured data processing. It provides a programming abs ...
- Linux 2.4调度系统分析--转
http://www.ibm.com/developerworks/cn/linux/kernel/l-k24sch/index.html 杨沙洲 (pubb@163.net)国防科技大学计算机学院 ...
- PHP header 的几种用法
跳转页面 header('Location:'.$url); //Location和":"之间无空格. 声明content-type header('content-type:te ...