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 ...
随机推荐
- 文成小盆友python-num3 集合，函数，-- 部分内置函数
本接主要内容: set -- 集合数据类型 函数 自定义函数 部分内置函数 一.set 集合数据类型 set集合,是一个无序且不重复的元素集合 集合基本特性 无序 不重复 创建集合 #!/bin/en ...
- OpenUrl 的跨平台实现
OpenUrl 是 iOS 中 UIApplication 提供的一个函数,用于调用其它程序.实际上各个平台都有自己的实现,这里提供一个直接封装完的跨平台版本给大家. Delphi ...
- BZOJ2084: [Poi2010]Antisymmetry
2084: [Poi2010]Antisymmetry Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 187 Solved: 125[Submit] ...
- 戴着镣铐起舞——从logo设计说起
一天中午走在路上,顺道去看了学校新媒体艺术与设计系的学生优秀作品展.看到一个logo设计时引发了我很大的兴趣,觉得设计的非常清新活泼,不过并没有拍下来,在这里不能贴图.但是logo设计大家应该都有所概 ...
- http与https的区别以及https的加密原理
HTTPS(Secure Hypertext Transfer Protocol)安全超文本传输协议 它是一个安全通信通道,它基于HTTP开发,用于在客户计算机和服务器之间交换信息.它使用安全套接字层 ...
- 合天网安实验室学习笔记----Linux基础
一.Linux的发展 linux kernel的版本是:2.6.32-279.el6.x86_64,此格式为:主版本.次版本.释出版本-修改版本 次版本为奇数:测试版: 次版本为偶数:稳定版: Lin ...
- (转)iOS7界面设计规范(13) - UI基础 - 与iOS的系统整合
突然就到了周日傍晚.你永远不会知道自己的生活在接下来的一周当中能够发生多少变化:各种不可预知性所带来的更多是快感还是焦虑与不安,冷暖自知.相比之下,白天工作当中那些需求列表与排期文档就显得那么可爱了, ...
- HDU--1584--蜘蛛牌--深搜版本号
蜘蛛牌 Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- 用JS来计算百钱买百鸡
怎样用一百块买一百只鸡?已知公鸡5块一只,母鸡3块一只,小鸡一块钱3只: 需要用到for循环嵌套,并且通过优化代码,可以加快运行效率. <!DOCTYPE html> <html l ...
- 掌握jQuery插件开发，这篇文章就够了
---恢复内容开始--- 在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及数据jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足形影 ...