效果图
（这个使用了jQuery的flashSlider插件）
html页面代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>图片展示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="css/pic.css">
<script type="text/javascript" src="jslib/jquery.js" charset="UTF-8"></script>
<script type="text/javascript" src="jslib/jquery.flashSlider-1.0.min.js" charset="UTF-8"></script>
<script type="text/javascript"charset="UTF-8">
$(document).ready(function(){
$("#slider").flashSlider();
});
</script>
</head>
<body>
<div id="slider">
<ul>
<li>
<img src="images/01.jpg" alt="" /></li>
<li>
<img src="images/02.jpg" alt="" /></li>
<li>
<img src="images/03.jpg" alt="" /></li>
<li>
<img src="images/04.jpg" alt="" /></li>
<li>
<img src="images/05.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
css页面代码
css/pic.css
html { color: #000; background: #FFF;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
table {border-collapse: collapse;border-spacing: 0;}
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }
li {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
font-variant: normal;
}
/* to preserve line-height and selector appearance */
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
input, textarea, select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
/*to enable resizing for IE*/
input, textarea, select {
*font-size: 100%;
}
/*because legend doesn't inherit in IE */
legend {
color: #000;
}
del, ins {
text-decoration: none;
}
/*容器*/
#slider ul, #slider li {
margin: 0;
padding: 0;
list-style: none;
}
/*数字导航样式*/
#flashnvanum {
bottom: 10px;
position: absolute;
right: 20px;
width: 90px;
}
#flashnvanum span {
background: transparent url(../images/flashbutton.gif) no-repeat scroll -15px 0;
color: #86A2B8;
cursor: pointer;
float: left;
font-family: Arial;
font-size: 12px;
height: 15px;
line-height: 15px;
margin: 1px;
text-align: center;
width: 15px;
}
#flashnvanum span.on {
background: transparent url(../images/flashbutton.gif) no-repeat scroll 0 0;
color: #FFFFFF;
height: 15px;
line-height: 15px;
width: 15px;
}
- 大小: 37.9 KB
分享到：
相关推荐
后来慢慢的接触多了，觉得这些也是so easy的嘛，于是为了加深对js、jQuery的理解以及探究网站上各种效果的实现方法，就有了jQuery插件之路这样一个系列，当然为了纪念当初对轮播的执念，于是就从轮播开始写了一个...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用，以及各种常用的jQuery插件的使用方法和技巧，所有这些知识点都配有完整的示例（包括...
本文实例讲述了jQuery实现输入框下拉列表树插件。分享给大家供大家参考。具体如下： 这是一款基于jquery实现的下拉列表树插件源码，是一款实用的jquery 树形下拉框下拉树代码。点击文本框即可弹出树形下拉列表，单击...
本文实例讲述了jquery衣服颜色选取插件效果。分享给大家供大家参考。具体如下： 这是一款基于jquery实现衣服颜色选取插件效果代码，有了这个插件可以为自己搭配衣服颜色，自己就是设计师，为自己设计独一无二的衣服...
这是是一款简单的jquery插件，使用该插件后实现鼠标可以滑动(拖动)控制数值范围选取的特效代码。 运行效果图： ——————-查看效果 下载源码——————- 小提示：浏览器中如果不能正常运行，可以尝试切换浏览...
本文实例讲述了jQuery在线选座位插件seat-charts特效。分享给大家供大家参考。具体如下： 这是一款基于JQuery实现的在线选座位插件seat-charts源码，是一款适合机票，电影票，客车票选座的jquery.seat-charts插件。...
今天介绍的这款 jQuery插件——BreakingNews 就能够制作这种间歇滚动效果。通过配置，它能够设置标题、标题颜色、字体大小、宽度、自动滚动、间歇时间等等，同时它还好提供两种过度方式——淡入淡出（fade）和向上...
我需要 jQuery 插件，让我可以很好地浏览单页网站，但我找不到我需要的所有功能： 平滑、连续的跨部分滚动 能够以编程方式导航到每个部分 可能的菜单集成，但我不希望将菜单作为包的一部分包含在内 每个部分可以有...
运行效果图： ——————-查看效果 下载源码——————- 小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 为大家分享的jquery实现多条件筛选特效代码如下 <!DOCTYPE html PUBLIC "-//W3C//DT
jquery带动画效果幻灯片插件devrama.slider是一款可以在焦点图中嵌入html内容和文字动画效果，运行时可出现图文层叠显示效果，且图片下方伴有进度条效果。 运行效果图： ——————-查看效果 下载源码————...
Web领域一直在发生变化并且其边界在过去的每一天都...通过浏览文档，掌握JQuery的语法是很容易的。它可以支持选择DOM元素，创建动画，处理事件，开发Ajax应用，甚至还为开发者提供了基于JavaScript类库之上创建插件的能
Z-blog浏览数实时统计插件用到的技术：ASP相关技术、Access数据库方面的知识、Jquery方面的技术、AJAX方面的技术等。 4. Z-blog浏览数实时统计插件的缺陷：安装过程需要手动进行；统计数据不能将留言本访问量...
jQuery实现滚动新闻代码是一款基于bootstrup 3实现的响应式jQuery滚动新闻插件。有三种展示新闻的方式，自动向下循环展示，自动向上循环展示以及手动循环展示，总有一款适合你的。 运行效果图： ——————-查看...
支持添加事件jQuery日历是一款可以实时添加删除时间的jquery日历插件代码，感兴趣的朋友快来学习学习吧 运行效果图：———————-查看效果 下载源码———————– 小提示：浏览器中如果不能正常运行，可以...
这是一款基于jquery实现的banner焦点图播放效果的插件，图片播放时处于满屏的状态，很具有画面感，呈现的效果更佳充实，用户的视觉体验更加具体，是一款很时尚大方的特效代码。 运行效果图： ——————-查看效果...
jquery插件 使用自己创作的Js插件—— CJL.0.1.min.js定义的口风琴菜单，其实也可称为“手风琴”菜单，因为两者很相似，都是向某一方向折叠或展开，具体到本代码，它是垂直折叠，可以展开更多的内容供浏览，平时它...
带时间的jQuery日期控件代码是一款基于jQueryUI实现的，可自定义日期插件语言，这个日期控件的亮点就在于选择的时间可精确到分钟。 运行效果图： ——————-查看效果 下载源码——————- 小提示：浏览器中...
js实现图片放大和拖拽特效是一款非常实用的js特效，实现了图片的放大和拖拽功能，没用用到jquery插件，是用原生javascript实现的，除了点击放大和缩小按钮来控制图片的放大缩小，还可以使用鼠标的滚轮控制图片的缩放...
6.2 网络硬盘功能具体实现——浏览磁盘和显示文件信息 6.3 网络硬盘功能具体实现——操作文件夹和文件 6.4 小结 第7章 网站统计模块(jsp+servlet) 7.1 网站统计模块原理 7.2 实现显示欢迎信息功能，...