在线预览

下载地址

实例代码

<!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. 2013 duilib入门简明教程 -- 完整的自绘标题栏(8)

        看了前面那么多教程,相信对duilib已有基本映像了,我们就快马加鞭,做出一个完整的自绘标题栏吧~     看到下面这个效果图,小伙伴们是不是有点惊呆了呢~O(∩_∩)O~       dui ...

  2. WCF学习之旅——第一个WCF示例（三）

    第五步:创建客户端 WCF应用服务被成功寄宿后,WCF服务应用便开始了服务调用请求的监听工作.此外,服务寄宿将服务描述通过元数据的形式发布出来,相应的客户端就可以获取这些元数据.接下来我们来创建客户端 ...

  3. WPF入门教程系列二十一——DataGrid示例(一)

    前面我们学习了ListView控件的使用示例,今天我们来学习DataGrid的有关知识.提到DataGrid 不管是Asp.Net中的网页开发还是WinForm应用程序开发都会频繁使用.通过它我们可以 ...

  4. Uiautomator 2.0之UiObject2类学习小记

    1. 基础动作 1.1. 相关API介绍 API 说明 clear() 清楚编辑框内的内容 click() 点击一个对象 clickAndWait(EventCondition<R> co ...

  5. Use Qt in Debian for OpenCASCADE

    Use Qt in Debian for OpenCASCADE eryar@163.com Recently several OpenCASCADE enthusiasts want to buil ...

  6. WPF根据Oracle数据库的表，生成CS文件小工具

    开发小工具的原因: 1.我们公司的开发是客户端用C#,服务端用Java,前后台在通讯交互的时候,会用到Oracle数据库的字段,因为服务器端有公司总经理开发的一个根据Oracle数据库的表生成的cla ...

  7. jQuery的Internal DSL

    JQuery的核心理念是write less,do more(写的更少,做的更多),那么链式方法的设计与这个核心理念不谋而合.那么从深层次考虑这种设计其实就是一种Internal DSL. DSL是指 ...

  8. 韩国"被申遗" （转自果壳）

    "被申遗"不是指"没申遗",而是全都经过了中国人重新包装. 近日,有报道称韩国计划将火炕申报世界遗产,联系近年来韩国多起"申遗事件",国内网 ...

  9. Opencv摄像头实时人脸识别

    Introduction 网上存在很多人脸识别的文章,这篇文章是我的一个作业,重在通过摄像头实时采集人脸信息,进行人脸检测和人脸识别,并将识别结果显示在左上角. 利用 OpenCV 实现一个实时的人脸 ...

  10. MySQL入门02-MySQL二进制版本快速部署

    在上篇文章 MySQL入门01-MySQL源码安装 中,我们介绍了MySQL源码安装的方法. 源码安装虽然有着更加灵活和更加优化等诸多优势.但源码编译安装部署的过程相对复杂,而且整个过程所花费的时间很 ...