原生js实现移动开发轮播图、相册滑动特效


Posted in Javascript onApril 17, 2015

使用方法:

分别引用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="/"><img src="img/1.jpg" /></a></li>
<li><a href="/"><img src="img/2.jpg" /></a></li>
<li><a href="/"><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="/"><img src="img/1.jpg" /></a></li>
<li><a href="/"><img src="img/2.jpg" /></a></li>
<li><a href="/"><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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 #Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 #Javascript
JavaScript实现的简单幂函数实例
Apr 17 #Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 #Javascript
jQuery中toggle()函数的使用实例
Apr 17 #Javascript
JQuery实现可直接编辑的表格
Apr 16 #Javascript
JS中捕获console.log()输出的方法
Apr 16 #Javascript
You might like
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
Javascript实现单例模式
2016/01/24 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
shiro授权的实现原理
2017/09/21 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
python登录豆瓣并发帖的方法
2015/07/08 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
python的列表List求均值和中位数实例
2020/03/03 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
应届生污水处理求职信
2013/11/06 职场文书
企业行政文员岗位职责
2013/12/03 职场文书
毕业自荐信
2013/12/16 职场文书
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
2014年秘书工作总结
2014/11/25 职场文书
2015年市场营销工作总结
2015/07/23 职场文书