在线预览

下载地址

实例代码

<!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. android studio sdk 不能更新

    网上看到好多sdk不能更新的,解决办法基本上一下,试了下大都没用,,有人说改hosts ,我试了 貌似没用 下面是我亲测可以更新的一种方法:使用镜像地址更新 步骤: 1. 打开 SDK Manager ...

  2. SSIS 数据源组件的External Metadata和Advanced Property

    1,SSIS的组件属性ValidateExternalMetadata 如果一个Destination组件使用的是上游创建的staging table,那么必须设置 ValidateExternalM ...

  3. setValue:forUndefinedKey this class is not key value coding-compliant for the key

    下午开发过程中遇到一个错误,结果被的真惨,从上午 11 点查错一直查到下午 2 点才找到错误的原因,真的郁闷的不行. 关于查错这么久,主要的原因是:   1. 自己对 IOS 开发还不熟悉2. 不知道 ...

  4. jQuery插件：jqGrid使用（一）

    1. Loading Data Load from JavaScript Array BundleConfig.cs using System.Web; using System.Web.Optimi ...

  5. bootstrap-modal 学习笔记 源码分析

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,怎么用直接官网 http://twitter.github.io/bootstrap/ 我博客的定位就是把这些年看过的源码给慢慢 ...

  6. Linux下修改Mysql的用户(root)的密码

    修改的用户都以root为列.一.拥有原来的myql的root的密码: 方法一:在mysql系统外,使用mysqladmin# mysqladmin -u root -p password " ...

  7. javascript四种类型识别的方法

    × 目录 [1]typeof [2]instanceof [3]constructor[4]toString 前面的话 javascript有复杂的类型系统,类型识别则是基本的功能.javascrip ...

  8. ksoap调用webservice

    Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现.协调和配置这些应用程序,用于开发分布 ...

  9. 跟着9张思维导图学习Javascript

    学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 javascript 相关的思维导图(非原创). 思维导图小tips: 思维导图又叫心智图,是表达发射性思维的 ...

  10. angular开发者吐槽react+redux的复杂：“一个demo证明你的开发效率低下”

    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...