效果图:

第一步:添加引用

    <script src="jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<link href="nivo-slider.css" rel="stylesheet" type="text/css" />
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$('document').ready(
function () {
$('#slider').nivoSlider({
effect: 'random', // 过渡效果
slices: 15, //effect为切片效果时的数量
boxCols: 8, //effect为格子效果时的列
boxRows: 4, //effect为格子效果时的行
animSpeed: 500, //动画速度
pauseTime: 30000, //图片切换速度
startSlide: 0, //从第几张开始
directionNav: true, //是否显示图片切换按钮(上/下页)
directionNavHide: false, //是否鼠标经过才显示
controlNav: true, // 显示序列导航
controlNavThumbs: false, // 显示图片导航
controlNavThumbsFromRel: false, // 使用img的rel属性作为缩略图地址
controlNavThumbsSearch: '.jpg', // 查找特定字符串(controlNavThumbs必须为true)
controlNavThumbsReplace: '_thumb.jpg', // 替换成这个字符(controlNavThumbs必须为true)
keyboardNav: true, // 键盘控制(左右箭头)PS:建议把代码中的keypress换成keydown,因为在Chrome下有兼容问题.
pauseOnHover: true, // 鼠标经过时暂停播放
manualAdvance: false, // 是否手动播放(false为自动播放幻灯片)
captionOpacity: 0.1, // 字幕透明度
prevText: '',
nextText: '',
randomStart: false, //是否随机图片开始
beforeChange: function(){}, //动画开始前触发
afterChange: function(){}, //动画结束后触发
slideshowEnd: function(){}, // 本轮循环结束触发
lastSlide: function(){}, // 最后一张图片播放结束触发
afterLoad: function(){} // 加载完毕时触发
});
}
);
</script>

nivoSlider

第二步:添加页面代码

<div style="text-align:center; width:100%;height:700px;">
<div id="slider" class="nivoSlider" style="width:700px;margin-left:125px;">
<%=ImageUrl %>
</div>
</div>

其中<%=ImageUrl %>是后台从数据库绑定的Image图片,你懂的。

以下附上nivosilder的源代码,免费下载。

http://files.cnblogs.com/FirstCode/nivoslider.pack2_.1.zip

JQuery图片轮换 nivoSlider图片轮换的更多相关文章

  1. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  2. jQuery实现鼠标经过图片变亮效果

    在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  3. JQuery开发之Galleriffic图片插件介绍

    Galleriffic是一个用于创建快速展示相册中照片的jQuery插件.从图一中可以看成,图片既可以以幻灯片的方式查看,也可以手动点击缩略图查看.Galleriffic还支持分页,从而使得它能够展示 ...

  4. Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片

    Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在edge ...

  5. jQuery.hhLRSlider 左右滚动图片插件

    /**  * jQuery.hhLRSlider 左右滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

  6. 使用jQuery来检测远程图片文件是否存在

    使用jQuery来检测远程图片文件是否存在 最近为我的憨豆人笑园添加图片功能时,遇到了这个问题,用户可以填写一个远程的图片地址,也可以上传一个本地图片.为了不浪费服务器的资源,我们需要在客户端先对用户 ...

  7. 使用jquery获取网页中图片的高度——解惑

    jQuery获取网页中图片的高度 使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的 $("img").whith();(返回纯数字) $(&qu ...

  8. 基于jQuery带标题的图片3D切换焦点图

    今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...

  9. 基于jQuery可悬停控制图片轮播代码

    基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览   源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...

随机推荐

  1. FMDB警告Warning: there is at least one open result set around after performing的问题

    FMDB操作sqlite的时候总是报警告Warning: there is at least one open result set around after performing,后来发现是执行查询 ...

  2. Thinkphp 零散知识点(caa/js路径,引入第三方类,ajax返回,session/cookie)

    一.关于JS和CSS路径问题 1.找路径是从入口文件index.php来找的,而不是从文件本身所在位置来找, 因为我们访问时是访问的入口文件 2.在存放JS和CSS的时候可以放到public文件夹下 ...

  3. Jquery创建JSON对象

    <html> <body> <h2>通过 JSON 字符串来创建对象</h3> <p> First Name: <span id=&q ...

  4. jquery easy ui 学习 (6) basic validatebox

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 个人Python常用Package及其安装

    为了避免每次重装系统时又要东翻西找,现在此记录一下目前常用的Python包安装过程. 1) Python: 2.7.11, 下载地址:www.python.org.由于个人喜欢使用PyQt4(其实是不 ...

  6. C语言基础学习运算符-关系运算符

    比较大小 首先,我们得先了解一下布尔类型.C语言的C99标准支持布尔类型,关键字为_Bool,用于表示逻辑值true与false.C语言用值1表示true, 用值0表示false.因此布尔类型实际上是 ...

  7. SPSS方差分析

    1.overall:一切的,全面地 单因素方差分析:分析--比较均值--单因素ANOVA.多因素方差分析:分析--一般线性模型--单变量. 单因素方差分析和单变量方差分析区别:单因素针对的是自变量(自 ...

  8. cf C. Divisible by Seven

    http://codeforces.com/contest/376/problem/C 题意:给你一个大数最多含有10^6个数字,这里面必须含有1,6,8,9,然后重新排列找出一个能被6整除的数. 思 ...

  9. hdu 4407 Sum

    http://acm.hdu.edu.cn/showproblem.php?pid=4407 题意:给定初始n个数1..n,两个操作,①1 x y p  询问第x个数到第y个数中与p互质的数的和; ② ...

  10. 【模拟】HDU 5774 Where Amazing Happens

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5774 题目大意: 已知1946~2015每一年赢得人是谁,给n个名字,问赢了多少次. 题目思路: [ ...