在线预览

下载地址

实例代码

<!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. Session for SSRS Report of Microsoft Dynamics AX

    Session for SSRS Report of Microsoft Dynamics AX 版权声明:本文为博主原创文章,未经博主允许不得转载. Contract •A data contrac ...

  2. $stateParams

  3. 阿里云centos7搭建wordpress环境

    阿里云搭建wordpress系统 一.购买阿里云 二.安装php开发环境 1． https://www.apachefriends.org/zh_cn/index.html网站下载linux下的xam ...

  4. 面向对象设计之SRP(单一职责)原则

    SRP设计原则面向对象类设计的第一个原则,最优先考虑的因素 一个类应该有且仅有一个职责.所谓一个类的职责是指引起该类变化的原因,如果一个类具有一个以上的职责,那么就会有多个不同的原因 引起该类变化,其 ...

  5. 【源码】谷歌代理~WPF简单小软件-2015-10-15首发 （2016-03-01已更新源）

    蛋疼,昨天把代理去了后才发现,原来咱们连谷歌应用都访问不了,,,用别人的总觉得不怎么安全,然后今天早上就编了个小软件干掉他这限制==>  GoogleProxy.exe [主要目的:为了能在线安 ...

  6. js只能输入数字、汉字、字母等正则匹配

    只能输英文:<input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> 只 ...

  7. javascript面向对象系列第四篇——选项卡的实现

    前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...

  8. Android okHttp网络请求之文件上传下载

    前言: 前面介绍了基于okHttp的get.post基本使用(http://www.cnblogs.com/whoislcj/p/5526431.html),今天来实现一下基于okHttp的文件上传. ...

  9. 【Java心得总结二】浅谈Java中的异常

    作为一个面向对象编程的程序员对于 下面的一句一定非常熟悉: try { // 代码块 } catch(Exception e) { // 异常处理 } finally { // 清理工作 } 就是面向 ...

  10. SQL Server SQL性能优化之--pivot行列转换减少扫描计数优化查询语句

    原文出处:http://www.cnblogs.com/wy123/p/5933734.html 先看常用的一种表结构设计方式: 那么可能会遇到一种典型的查询方式,主子表关联,查询子表中的某些(或者全 ...