photoSlider-原生js移动开发轮播图、相册滑动插件
2015-03-26 23:15
791 查看
写了个简单的web移动端滑动切换相册图片插件。
分别引用css文件和js文件
如:
html部分:
查看实例
分别引用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-原生js移动开发轮播图、相册滑动插件
- photoSlider-原生js移动开发轮播图、相册滑动插件
- 原生js实现移动开发轮播图、相册滑动特效
- 移动开发中的上下左右滑动插件jquery.swipe.js
- 移动开发中用到的几款js插件之滑动展示(1)
- 移动开发中的上下左右滑动插件jquery.swipe.js非常经典的啊!
- 【转载】移动开发中的上下左右滑动插件jquery.swipe.js
- 原生js之滑动轮播图
- 基于jq的图片轮播插件,滑动切图,兼容移动,PC端
- 【转】移动webApp开发的前端工程师必要的代码,手机webApp触摸左右滑动切换轮播图片广告
- 原生js插件开发入门
- 原生js开发的日历插件
- 转向移动webApp开发的前端工程师必要的代码,手机webApp触摸左右滑动切换轮播图片广告
- [js开源组件开发]js轮播图片支持手机滑动切换
- 3、js原生实现移动端手指滑动轮播图效果(3)
- 自己写的原生js轮播图插件
- js各种图片轮播滑动插件 上下,左右缩略图按钮点击图
- 原生JS实现"旋转木马"效果的图片轮播插件
- 1、js原生实现移动端手指滑动轮播图效果
- 原生JS实现"旋转木马"效果的图片轮播插件