在线预览

下载地址

实例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>适应手机端的jQuery图片滑块动画DEMO演示</title>

<link rel="stylesheet" href="/api/jq/5733e37626dcb/css/style.css" />

<script src="/api/jq/5733e37626dcb/js/islider.js"></script>

<script src="/api/jq/5733e37626dcb/js/plugins/islider_desktop.js"></script>

</head>

<body>

<!-- 代码 开始 -->

<!--<h4 style="text-align: center">animateType参数中设置，目前支持default, rotate, flip 和 depth, 点击按钮看效果</h4>-->

<div id="iSlider-effect-wrapper">

    <div id="animation-effect" class="iSlider-effect"></div>

</div>

<div id="menu-select">

    <span class="on">default</span>

    <span>rotate</span>

    <span>flip</span>

    <span>depth</span>

</div>

<h4 style="text-align: center">垂直轮播</h4>

<div id="vertical-slide" class="iSlider-effect"></div>

<h4 style="text-align: center">不循环模式(最始及最末图片滑动会有衰减效果)</h4>

<div id="non-looping" class="iSlider-effect"></div>

<h4 style="text-align: center">DOM</h4>

<div id="dom-effect" class="iSlider-effect"></div>

<script>

        var picList = [

        {

            width: 150,

            height: 207,

            content: "/api/jq/5733e37626dcb/images/1.jpg",

        },

        {

            width: 150,

            height: 207,

            content: "/api/jq/5733e37626dcb/images/2.jpg",

        },

        {

            width: 150,

            height: 207,

            content: "/api/jq/5733e37626dcb/images/3.jpg",

        },

        {

            width: 150,

            height: 207,

            content:"/api/jq/5733e37626dcb/images/5.jpg"

        },

        {

            width: 150,

            height: 207,

            content:"/api/jq/5733e37626dcb/images/6.jpg"

        },

        {

            width: 300,

            height: 414,

            content:"/api/jq/5733e37626dcb/images/7.jpg"

        },

        {

            width: 150,

            height: 207,

            content:"/api/jq/5733e37626dcb/images/8.jpg"

        },

        {

            width: 150,

            height: 207,

            content:"/api/jq/5733e37626dcb/images/9.jpg"

        }

        ];

        var domList = [

        {

            'height' : '100%',

            'width' : '100%',

            'content' : '<div><h1>Home</h1><h2>This is home page</h2><p>home is pretty awsome</p><div>'

        },{

            'height' : '100%',

            'width' : '100%',

            'content' : '<div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>'

        },{

            'height' : '100%',

            'width' : '100%',

            'content' : '<div><h1>Page2</h1><h2>This is Page2</h2><p>Page2 is pretty awsome</p><div>'

        },{

            'height' : '100%',

            'width' : '100%',

            'content' : '<div><h1>Page3</h1><h2>This is page3</h2><p>page3 is pretty awsome</p><div>'

        }

        ];

        //all animation effect

        var islider1 = new iSlider({

            data: picList,

            dom: document.getElementById("animation-effect"),

            duration: 2000,

            animateType: 'default',

            isAutoplay: true,

            isLooping: true,

            // isVertical: true, 是否垂直滚动

        });

        islider1.bindMouse();

        //vertical slide

        var islider2 = new iSlider({

            data: picList,

            dom: document.getElementById("vertical-slide"),

            duration: 2000,

            animateType: 'default',

            isVertical: true,

            isAutoplay: true,

            isLooping: true,

        });

        islider2.bindMouse();

        //不循环 不自动播放

        var islider3 = new iSlider({

            data: picList,

            dom: document.getElementById("non-looping"),

            animateType: 'default',

        });

        islider3.bindMouse();

        //滚动dom

        var islider4 = new iSlider({

            data: domList,

            dom: document.getElementById("dom-effect"),

            type: 'dom',

            animateType: 'default',

            isAutoplay: true,

            isLooping: true,

        });

        islider4.bindMouse();

		var menu = document.getElementById('menu-select').children;

        function clickMenuActive(target) {

            for (var i = 0; i < menu.length; i++) {

                menu[i].className = '';

            }

            target.className = 'on';

        }

        menu[0].onclick = function() {

            clickMenuActive(this);

            islider1._opts.animateType = this.innerHTML;

            islider1.reset();

        };

        menu[1].onclick = function() {

            clickMenuActive(this);

            islider1._opts.animateType = this.innerHTML;

            islider1.reset();

        };

        menu[2].onclick = function() {

            clickMenuActive(this);

            islider1._opts.animateType = this.innerHTML;

            islider1.reset();

        };

        menu[3].onclick = function() {

            clickMenuActive(this);

            islider1._opts.animateType = this.innerHTML;

            islider1.reset();

        };

</script>

<!-- 代码 结束 -->

</body>

</html>

　　

适应手机端的jQuery图片滑块动画DEMO演示的更多相关文章

  1. 适应手机端的jQuery图片滑块动画

    一款比较特别的jQuery图片滑块插件,它不仅在PC浏览器上可以使用,而且更适合在手机端的网页中使用.这款jQuery插件不仅可以定义图片切换的方向,而且可以即时切换图片切换的动画方式,可以有平移.翻 ...

  2. 一款手机端的jQuery图片滑块插件

    今天我们要介绍一款比较特别的jQuery图片滑块插件,它不仅在PC浏览器上可以使用,而且更适合在手机端的网页中使用.这款jQuery插件不仅可以定义图片切换的方向,而且可以即时切换图片切换的动画方式, ...

  3. 10个超赞的jQuery图片滑块动画

    在网站开发过程中,特别是前端开发这块,经常会使用到很多图片滑块动画,也就是一些基于jQuery和HTML5的焦点图插件.本文将为大家收集10个超赞的jQuery图片滑块动画,这些现成的jQuery插件 ...

  4. 八款强大的jQuery图片滑块动画插件

    jQuery是一款相当轻巧的JavaScript框架,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是 一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多 ...

  5. 前端不容错过的jQuery图片滑块插件

    作为前端开发者,我们会碰到很到各种各样的jQuery插件,但老实说,很少有自己写的.今天要分享的几款jQuery图片滑块插件,也就是jQuery焦点图插件,基本上会在每个网站都有应用,可以下载看看,也 ...

  6. 前端开发不容错过的jQuery图片滑块插件(转)

    作为前端开发者,我们会碰到很到各种各样的jQuery插件.今天要分享的几款jQuery图片滑块插件,也就是jQuery焦点图插件,基本上会在每个网站都有应用,可以下载看看,也许你可以用到. 1.jQu ...

  7. htm5手机端实现拖动图片

    htm5手机端实现拖动图片 <pre> <!doctype html><html><head> <title>Mobile Cookbook ...

  8. css3 一个六边形 和 放大旋转动画DEMO演示

    <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...

  9. 分享22款响应式的 jQuery 图片滑块插件

    响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...

随机推荐

  1. PHP的静态和接口

    静态普通成员普通成员属于对象//静态成员//静态成员属于类//static 关键字 变成静态成员/*class ren {    public $name;    public static $zho ...

  2. HTML5_01之表单新特性

    1.WebStorm快捷键: Ctrl+Alt+(向下方向键):快速复制当前行 Alt+(向上/下方向键):移动当前行 Ctrl+D:删除当前行 Ctrl+/:快速(取消)注释当前行 Ctrl+Alt ...

  3. python网络编程——IO多路复用之epoll

    1.内核EPOLL模型讲解     此部分参考http://blog.csdn.net/mango_song/article/details/42643971博文并整理 首先我们来定义流的概念,一个流 ...

  4. JavaSript模块规范 - AMD规范与CMD规范介绍（转）

    JavaSript模块规范 - AMD规范与CMD规范介绍 JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者 ...

  5. Leetcode-190 Reverse Bits

    #190. Reverse Bits Reverse bits of a given 32 bits unsigned integer. For example, given input 432615 ...

  6. Python标准模块--logging

    1 logging模块简介 logging模块是Python内置的标准模块,主要用于输出运行日志,可以设置输出日志的等级.日志保存路径.日志文件回滚等:相比print,具备如下优点: 可以通过设置不同 ...

  7. javascript中15种原生对象类型系统综述

    前面的话 在编程语言中,能够表示并操作的值的类型称做数据类型,编程语言最基本的特性就是能够支持多种数据类型.javascript拥有强大的类型系统,主要包括原生对象.宿主对象和浏览器拓展对象,本文主要 ...

  8. Java 8新特性-5 内建函数式接口

    在之前的一片博文 Lambda 表达式,提到过Java 8提供的函数式接口.在此文中,将介绍一下Java 8四个最基本的函数式接口 对于方法的引用,严格来讲都需要定义一个接口.不管我们如何操作实际上有 ...

  9. Html标签的语义化

    为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要.所谓标签语义化,就是指标签的含义. 为了更好的理解标签的语义化,先看下面这个例子: 1 <tab ...

  10. UCOSII内核代码分析

    1 UCOSII定义的关键数据结构 OS_EXT  INT8U             OSIntNesting; OSIntNesting用于判断当前系统是否正处于中断处理例程中. OS_EXT   ...