在线预览

下载地址

实例代码

<!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入门简明教程 -- 简单控件介绍 (12)

        前面的教程应该让大家对duilib的整体有所映像了,下面就来介绍下duilib具体控件的使用.     由于官方没有提供默认的控件样式,所以我就尽量使用win7或者XP自带的按钮样式了,虽然界 ...

  2. 关于ie11 的开发者工具

    win7旗舰系统64为,更新ie11: 新安装了ie11浏览器,安装以后发现原来可以正常使用的开发者工具不能使用,提示 Imposible use F12 Developer Tools (Excep ...

  3. springboot学习笔记(一)

    一.什么是SpringBoot 描述:Spring Boot是Spring社区发布的一个开源项目,旨在帮助开发者快速并且更简单的构建项目.大多数SpringBoot项目只需要很少的配置文件.二.Spr ...

  4. 在计算机 . 上没有找到服务 WAS

    添加的程序不全导致或者服务没开启导致 重新打开IIS,刷新一下 发现已经可以了,不再标红报错了

  5. 《ASP.NET MVC 5框架揭秘》样章发布

    今天算是新作<ASP.NET MVC 5框架揭秘>正式上架销售的日子(目前本书在互动网已经到货),为了让更多适合的朋友们能够阅读此书,同时也避免让不适合的读者误买此书,特将此书的样章发布出 ...

  6. android模仿58筛选下拉框(PopupWindow实现)

    前言:前几天用58同城APP找房子的时候,看到筛选下拉框蛮不错的,然后也有很多朋友需要实现这个功能,于是从网上下载了一个demo,在他的基础上进行修改,花了几个小时对他的代码进行修改,重构,封装.把一 ...

  7. 国内版Office 365和Azure AAD绑定的问题及解决方案

      背景: 1． 开发人员要做的事情,是希望在应用程序里面能调用Office 365 的API(Microsoft Graph)来动态添加Office 365账号 2． 如果需要调用这些API,必须在 ...

  8. 关于Repository、IUnitOfWork 在领域层和应用服务层之间的代码分布与实现

    本来早就准备总结一下关于Repository.IUnitOfWork之间的联系以及在各层中的分布,直到看到田园里的蟋蟀发表的文章:<DDD 领域驱动设计-谈谈 Repository.IUnitO ...

  9. ASP.NET MVC Application_Error 无效不执行

    我们一般在开发 ASP.NET MVC 应用程序的时候,会在 Application_Error 中添加异常日志记录,一般会记录 500 的错误信息,但如果应用程序在出错的时候,Application ...

  10. MVC, MVP, MVVM比较以及区别(上)

    MVC, MVP和MVVM都是用来解决界面呈现和逻辑代码分离而出现的模式.以前只是对它们有部分的了解,没有深入的研究过,对于一些里面的概念和区别也是一知半解.现在一边查资料,并结合自己的理解,来谈一下 ...