现在位置首页 / 前端开发 /正文

photoSlider:手机端触摸原生js移动开发轮播图、相册滑动插件

作者: IT小兵 | 2015年4月20日| 热度:℃ | 评论: |参与:

  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>


在线预览            立即下载

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询