<!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>插件cycle的简单运用</title>

 <style type="text/css">

 #nav { margin: 5px; }

 #nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }

 #nav a.activeSlide { background: #ea0 }

 #nav a:focus { outline: none; }

 </style>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

 <script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>

 <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

 <script type="text/javascript">

 $(function() {

     $('#slideshow').cycle({

         speed:       ,

         timeout:     ,

         pager:      '#nav',

        // pagerEvent: 'mouseover',

           pagerEvent: 'mouseenter.cycle',

         pauseOnPagerHover: true

     });

 });

 </script>

 </head>

 <body>

 <div id="nav"></div>

 <div id="slideshow" class="pics">

     <img src="http://malsup.github.com/images/beach1.jpg" width="" height="" />

     <img src="http://malsup.github.com/images/beach2.jpg" width="" height="" />

     <img src="http://malsup.github.com/images/beach3.jpg" width="" height="" />

     <img src="http://malsup.github.com/images/beach4.jpg" width="" height="" />

     <img src="http://malsup.github.com/images/beach5.jpg" width="" height="" />

     <img src="http://malsup.github.com/images/beach6.jpg" width="" height="" />

     <img src="http://malsup.github.com/images/beach7.jpg" width="" height="" />

 </div>

 <script type="text/javascript">

 $(function(){

     $('#slideshow').cycle({

         speed:       ,

         timeout:     ,

         pager:      '#nav',

         pagerEvent: 'mouseover',

         pauseOnPagerHover: true

     });

 });

 </script>

 </body>

 </html>

图片轮换cycle插件的运用的更多相关文章

  1. 使用图片视频展示插件blueimp Gallery改造网站的视频图片展示

    在很多情况下,我们网站可能会展示我们的产品图片.以及教程视频等内容,结合一个比较好的图片.视频展示插件,能够使得我们的站点更加方便使用,也更加酷炫,在Github上有很多相关的处理插件可以找来使用,有 ...

  2. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  3. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  4. 精心挑选10款优秀的 jQuery 图片左右滚动插件

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

  5. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  6. Jquery实现图片轮换效果

    最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...

  7. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  8. 图片延迟加载jquery插件imgLazyLoad(三)

    此Jquery插件是在图片加载前显示一个加载图片,当图片下载完毕后显示图片出来,可对图片进行是否自动缩放功能,此Jquery插件使用时可让页面先加载,而图片后加载的方式,解决了平时使用时要在图片显示出 ...

  9. 图片延迟加载jquery插件imgLazyLoading

    实现了图片延迟加载功能,插件代码非常简洁,且每个功能都把注释写得非常详细,适合网友们学习,好好利用哦 引入图片延迟加载Jquery插件文件后,页面使用代码如下: <script type=&qu ...

随机推荐

  1. 对DataTable里数据进行排序

    在日常开发过程中,有一个DataTable集合,里面有很多字段,现在要求针对某一列进行排序,如果该列为数字的话,进行ASC即可实现,但是该字段类型为string,此时排序就有点不正确了. 我也不多废话 ...

  2. 【转】Android中的颜色设置

    原文网址:http://www.cnblogs.com/bluestorm/p/3644669.html 1.在android中经常看到设置的颜色为八位的十六进制的颜色值,例如: 1 2 3 publ ...

  3. LA 6540 Fibonacci Tree

    以前做过的题···重新做一遍之后怎么做怎么wa···后来GG了···第二天看不知道为啥A了···难道我失忆了? 题意:无向图,边有黑色和白色两种颜色,求是否存在一个生成树中白边的个数是斐波那契数. 解 ...

  4. POJ 1258 Agri-Net

    题意:给一个无向图的邻接矩阵,求最小生成树. 解法:Kruskal算法.把边按边权排序,从小到大插入生成树中,如果一个边的两个点都在生成树中则不插入,用并查集维护. 代码: #include<s ...

  5. 【Python】一个python实例：给重要的文件创建备份.摘自crossin-python简明教程

    问题:写一个可以为所有重要文件创建备份的程序 考虑:源路径和目标路径各是什么;所有重要文件-有哪些;备份文件格式是什么;定期备份的话,备份文件名称如何规定等等.(ps,我自己只想到一个路径和名称) 程 ...

  6. 中文Win7下成功安装calabash-android步骤

    Calabash-android是支持android的UI自动化测试框架,网上看见很多同学说,安装calabash比较费劲,特别是Windows下安装,也没有一个详细的安装手册可供参考.正好,今天在W ...

  7. js中的new关键字都干了些什么？

    new 操作符 在有上面的基础概念的介绍之后,在加上new操作符,我们就能完成传统面向对象的class + new的方式创建对象,在javascript中,我们将这类方式成为Pseudoclassic ...

  8. C/C++：拷贝构造函数

    拷贝构造函数是一种特殊的构造函数,因为它也是用来构造对象的.它具有构造函数的所有特性.拷贝构造函数的作用是用一个已经存在的对象去初始化另一个对象,这两个对象的类类型应该是一样的.定义拷贝构造函数的形式 ...

  9. 进程隐藏与进程保护（SSDT Hook 实现）（二）

    文章目录:                   1. 引子 – Demo 实现效果: 2. 进程隐藏与进程保护概念: 3. SSDT Hook 框架搭建: 4. Ring0 实现进程隐藏: 5. Ri ...

  10. Eclipse Class Decompiler影响class默认打开方式，重新设置Eclipse默认源码打开方式

    安装Eclipse Class Decompiler插件后,Eclipse中的默认源码打开方式被修改为Eclipse Class Decompiler 这不是我喜欢的,因为我希望,源码从网络中获取,当 ...