图片轮换cycle插件的运用
<!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插件的运用的更多相关文章
- 使用图片视频展示插件blueimp Gallery改造网站的视频图片展示
在很多情况下,我们网站可能会展示我们的产品图片.以及教程视频等内容,结合一个比较好的图片.视频展示插件,能够使得我们的站点更加方便使用,也更加酷炫,在Github上有很多相关的处理插件可以找来使用,有 ...
- Lazy Load, 延迟加载图片的 jQuery 插件.
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- 精心挑选10款优秀的 jQuery 图片左右滚动插件
在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- Jquery实现图片轮换效果
最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
- 图片延迟加载jquery插件imgLazyLoad(三)
此Jquery插件是在图片加载前显示一个加载图片,当图片下载完毕后显示图片出来,可对图片进行是否自动缩放功能,此Jquery插件使用时可让页面先加载,而图片后加载的方式,解决了平时使用时要在图片显示出 ...
- 图片延迟加载jquery插件imgLazyLoading
实现了图片延迟加载功能,插件代码非常简洁,且每个功能都把注释写得非常详细,适合网友们学习,好好利用哦 引入图片延迟加载Jquery插件文件后,页面使用代码如下: <script type=&qu ...
随机推荐
- UVa 12096 (STL) The SetStack Computer
题意: 有一个集合栈计算机,栈中的元素全部是集合,还有一些相关的操作.输出每次操作后栈顶集合元素的个数. 分析: 这个题感觉有点抽象,集合还能套集合,倒是和题中配的套娃那个图很贴切. 把集合映射成ID ...
- 8.21 usaco
summary:6 bzoj1692://后缀数组就行了O(nlogn)c[30]会RE...注意!!! #include<cstdio> #include<cstring> ...
- RPi 2B UART作为调试口或者普通串口
/************************************************************************************** * RPi 2B UAR ...
- 2、Android应用程序基本特性
1. apk是android应用程序安装格式,.dex是Android二进制执行文件格式. 2.Android操作系统是基于Linux的多用户操作系统,每一个应用程序都是使用的不同的用户. 3. 默认 ...
- 基于QT的一个简易的安防
工程描述 opencv2.4.8 QT5 背景建模后,当有异物入侵时,把入侵的帧写到视频文件 使用BackgroundSubtractorMOG2背景建模 程序基于QT对话框 .pro #------ ...
- js 中&& 与 ||
/*** 几乎所有语言中||和&&都遵循“短路”原理,* 如&&中第一个表达式为假就不会去处理第二个表达式,而||正好相反.* js也遵循上述原则.* 当||时,找到为 ...
- 嵌入式开发应该掌握的一些Linux命令
Linux提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作.文件存取.目录操作.进程管理.文件权限设定等.所以,在Linux系统上工作离不开使用系统提供的命令.要想真正理解Linux系统, ...
- 【UR #12】实验室外的攻防战(BIT)
[题目链接] http://uoj.ac/problem/180 [题意] 给定两个1..n的排列AB,只有当ai<ai+1才能交换ai和ai+1,问是否能够将A转换为B. [思路] 令a[i] ...
- STL(pair map set vector priority_queue) poj 3297
POJ 3297 算法竞赛初级杂烩包 题意:学生选课,没个学生只能选一门课.大写字符是课的名字,小写是人名.如果课程后面有多个相同名字算一个,如果一个人选多门课,则他选不上课,输出课和每门课选课人数 ...
- leetcode@ [131/132] Palindrome Partitioning & Palindrome Partitioning II
https://leetcode.com/problems/palindrome-partitioning/ Given a string s, partition s such that every ...