jQuery-图片轮播-随意切换图片
<!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>
<title>图片切换插件Nivo Slider</title>
<link href="Css-8-8/nivo-slider.css"
rel="stylesheet" type="text/css" />
<link href="Css-8-8/theme-default.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="Jscript/jquery-1.8.2.min.js">
</script>
<script type="text/javascript"
src="Js-8-8/jquery.nivo.slider.js">
</script>
<script type="text/javascript">
$(function() {
$('#slider').nivoSlider({
effect: 'boxRandom', //图片随机切换效果
beforeChange: function() { }, //可编写图片切换之前回调函数
afterLoad: function() { }, //可编写图片加载之后回调函数
controlNavThumbs: true, //使用缩略图控制导航
manualAdvance: true //需要手动切换
});
});
</script>
</head>
<body>
<div class="theme-default">
<div id="slider" class="nivoSlider">
<a href="javascript:">
<img src="Pic-8-8/img01.jpg" alt="01"
data-thumb="Pic-8-8/img01.jpg" title="第1幅图片"/>
</a>
<a href="javascript:">
<img src="Pic-8-8/img02.jpg" alt="02"
data-thumb="Pic-8-8/img02.jpg" title="第2幅图片"/>
</a>
<a href="javascript:">
<img src="Pic-8-8/img03.jpg" alt="03"
data-thumb="Pic-8-8/img03.jpg" title="第3幅图片"/>
</a>
<a href="javascript:">
<img src="Pic-8-8/img04.jpg" alt="04"
data-thumb="Pic-8-8/img04.jpg" title="第4幅图片"/>
</a>
<a href="javascript:">
<img src="Pic-8-8/img05.jpg" alt="05"
data-thumb="Pic-8-8/img05.jpg" title="第5幅图片"/>
</a>
</div>
</div>
</body>
</html>
jQuery-图片轮播-随意切换图片的更多相关文章
- 图片轮播(左右切换)--JS原生和jQuery实现
图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章 淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...
- Flexslider图片轮播、文字图片相结合滑动切换效果
Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效 ...
- Jquery图片轮播和CSS图片轮播
学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...
- axure 动态面板制作图片轮播 (01图片轮播)
利用Axure的动态面板组件制作图片轮播: 首先现在操作区添加一个动态面板组件: 鼠标放在动态面板上,右键单击选择面板状态管理,给动态面板设置名称并添加两条状态然后点击确定. 双击动态面板,然后双击s ...
- Flexslider插件实现图片轮播、文字图片相结合滑动切换效果
插件下载: 点击下载 密码: fbeg Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素 ...
- jquery图片轮播,单张图片轮播时间不同
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...
- html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
- 基于bootstrap的图片轮播效果展示
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...
随机推荐
- Angular4 —— NgModule
http://www.cnblogs.com/dojo-lzz/p/5878073.html
- CHARACTER SET
mysql> show tables; +-----------------+ | Tables_in_w0811 | +-----------------+ | t | | w_engine ...
- nohup 和 &
&的意思是在后台运行, 什么意思呢? 意思是说, 当你在执行 ./a.out & 的时候, 即使你用ctrl C, 那么a.out照样运行(因为对SIGINT信号免疫). 但是要注 ...
- TZOJ 5225: 玩转二叉树
描述 给定一棵二叉树的中序遍历和前序遍历,请你先将树做个镜面反转,再输出反转后的层序遍历的序列.所谓镜面反转,是指将所有非叶结点的左右孩子对换.这里假设键值都是互不相等的正整数. 输入 输入第一行给出 ...
- PostgreSQL 自动输入密码
在 Shell 命令行中,使用 postgresql-client 连接 PostgreSQL 数据库时,每次都要输入密码.如果要写 Shell Script,做一些类似于备份的自动化管理工作,每次都 ...
- ext.js的mvc
1.Ext.js的mvc开发模式 在ext.js4.0以后引入mvc开发模式,将js分成model-view-controller三层,使得大量js代码变得更加易于维护和重用,这就是ext.jsmvc ...
- h5 中的 section 标签
转自 http://www.studyofnet.com/news/331.html 本文导读:<section> 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中 ...
- dedecms标签(tags)页面伪静态设置
我们在创建文章的时候经常会设置一些tags,如果发表文章时关键词没添加的话tags也会自动成为文章的关键词,tags是一个不错的功能,通过关键词链接可以快速寻找到相关内容,但是标签页面的url经常会带 ...
- win7 64位共享打印机
故障一 链接的电脑提示需要密码 处理步聚:取消win7共享计算机上网络的密码保护共享 1.查看网上邻居链接局域网的网络的网络防火墙设置. 2.更改链接局域网的网络的防火墙的更改高级共设置. 3.关闭链 ...
- Win7各版本功能对比