简单的移动端图片滑动切换浏览插件

分别引用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移动开发轮播图-相册滑动插件的更多相关文章

  1. photoSlider-原生js移动开发轮播图、相册滑动插件

    详细内容请点击 在线预览   立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...

  2. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  3. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  4. 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  5. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  6. 原生 js 左右切换轮播图

    使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...

  7. 原生JS实现旋转木马轮播图特效

    大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...

  8. 原生js写简单轮播图方式１－从左向右滑动

    轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...

  9. 用 JS 写 （轮播图 / 选项卡 / 滑动门）

    页面中经常会用到各式各样的轮播图,今天贺贺为大家介绍一种常用的方法,对于JS我们需要举一反三,一种方法可以对多个轮播样式进行渲染. <head> <meta charset=&quo ...

随机推荐

  1. iOS工程结构

          好的架构不是设计出来的,而是进化而来的! 写在前面 从2011年底开始学习iOS开发,到现在也已经快3年了,虽然中途没有一直进行iOS的开发(总是在Android和iOS间切换),但始终没 ...

  2. word2vec的艰难成长史

    1.首先在网站上面下载gensim,我是在11服务器上面下载的 2.使用winpython打开 3.在command windows 下使用pip install gensim这句话进行,原先使用这句 ...

  3. 枚举类：用enum关键字来定义一个枚举类

    1)枚举类的两种定义方法 1>通过构造器 public enum Grade{ A("A", "90-100"),B("B",&quo ...

  4. 动态Linq(结合反射)

    这篇文章决定对最近一个单机版Web程序用到的东西总结一下. 一.反射Linq之OrderBy 动态Linq结合反射对某字段排序: namespace 动态Linq { class Program { ...

  5. translate函数说明

    TRANSLATE(expr, from_string, to_string) from_string 与 to_string 以字符为单位,对应字符一一替换. SQL> SELECT TRAN ...

  6. Memcached和Redis异同

    在考虑对应用程序的性能表现进行提升时,缓存机制往往是解决问题的重要起点,而Memcached与Redis则经常被作为初步方案来加以比较.这两套声名显赫的缓存引擎拥有着诸多相似之处,但它们同样也具备大量 ...

  7. cf445A DZY Loves Chessboard

    A. DZY Loves Chessboard time limit per test 1 second memory limit per test 256 megabytes input stand ...

  8. (Data structure)Implement Trie && Add and Search Word

    Implement Trie (Prefix Tree) Implement a trie with insert, search, and startsWith methods. Note:You ...

  9. HDU 4444 Walk (离散化建图+BFS+记忆化搜索) 绝对经典

    题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=4444 题意:给你一些n个矩形,给你一个起点,一个终点,要你求从起点到终点最少需要转多少个弯 题解:因为 ...

  10. c语言指向结构体的指针作为函数参数

    注意 这里包括形参和实参 struct dangdangtest { ]; int num; }; void change(int num)//值传递 新建一个变量接受传递的值 { num = ; } ...