效果图
（这个使用了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
分享到：
相关推荐
这个点击图片放大插件就是典型的jQuery插件，它利用jQuery提供的API和事件处理机制，实现了图片的动态放大与缩小效果。 三、插件实现原理 1. 图片绑定事件：首先，插件会为页面中的所有图片元素绑定点击事件。当...
以下将详细介绍 Imgbox 插件的核心功能、使用方法以及相关的 jQuery 知识点。 1. **jQuery 基础** jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和Ajax交互。jQuery 的目标是...
本主题聚焦于一个特定的jQuery插件——使用按钮控制图片大小缩放和切换功能。这个插件允许用户通过叠加在图片上的控制按钮来调整图片的大小，并进行平滑的幻灯片切换。 首先，让我们了解一下jQuery的基础。jQuery是...
在网页设计中，为了提升用户体验，常常需要使用到图片浏览控制插件，特别是那些具有左右箭头导航功能的，能够帮助用户方便地查看一组相关的图片。这个“网页模板——基于jQuery的左右带箭头的图片浏览控制插件”提供...
【jQuery图片轮换插件详解】 在Web开发中，图片轮换是一种常见的视觉效果，用于展示多张图片，提升用户体验，吸引用户注意力。jQuery作为一款轻量级、高性能的JavaScript库，提供了丰富的功能来简化此类任务。本篇...
【jQuery图片浏览插件——Viewer】 在网页开发中，图片浏览功能是不可或缺的一部分，而jQuery作为一款广泛使用的JavaScript库，提供了丰富的插件来增强用户体验。"简单好用的图片浏览插件jquery版本"就是这样的一个...
**jQuery图片展示插件——AnythingSlider** jQuery是一个广泛使用的JavaScript库，它极大地简化了网页的交互性和动态内容的处理。在网页设计中，图片展示插件是不可或缺的一部分，它们能够帮助用户以美观、互动的...
今天我们要深入探讨的是一个非常实用的jQuery图片轮换插件——nivo-slider。 **1. nivo-slider简介** nivo-slider是一款流行的jQuery插件，专门用于创建美观、流畅的图片滑块。它提供了多种过渡效果，使得图片轮换...
《jQuery图片展示插件——ThinkShow深度解析》 在网页设计和开发中，图片展示是不可或缺的一部分，尤其在用户体验和互动性方面起着至关重要的作用。jQuery作为一个强大的JavaScript库，为开发者提供了丰富的功能和...
**jQuery树形插件——构建交互式数据展示的利器** jQuery树形插件是一种用于在网页上呈现层次结构数据的工具，它使得开发者能够轻松创建美观、功能丰富的树状菜单或目录。在网页开发中，这种插件常用于网站导航、...
总之，bzoom作为一款jQuery插件，为产品图片提供了丰富的交互效果，增强了用户的浏览体验。其易于集成和高度可定制性，使得它成为电商和其他需要产品展示的网站的理想选择。通过深入理解和灵活运用，我们可以利用...
**jQuery幻灯片插件——SkitterSlideshow详解** SkitterSlideshow是一款强大的jQuery插件，专注于创建引人入胜的幻灯片展示效果。它以其丰富的动画过渡效果和高度可定制性在网页设计领域备受青睐。这款插件提供38种...
总之，“网页模板——jQuery chili图片远处放大插件打包.zip”提供的是一种提升网页图片展示体验的解决方案，通过使用jQuery Chili插件和精心设计的JavaScript代码，使得用户能够便捷地查看和欣赏网页中的图片。...
本文将详细探讨一款基于jQuery的图片滑动插件——imgSlideInput 0.0.2，该插件适用于特殊表单以及一般性的图片滑动展示，已经在Firefox 3.6、IE 7-9和Chrome等主流浏览器上通过了测试。 首先，imgSlideInput插件的...
《基于jQuery的图片点击弹窗预览大图插件——jQuery Fancybox 1.3.4详解》 在Web开发中，提供一个优雅的图片预览功能是必不可少的，这可以提升用户体验，使得用户能够在不离开当前页面的情况下查看图片的全貌。...
今天我们要探讨的是一个基于jQuery Mobile的图片轮转插件——Camera1.3.4，它专门用于实现手机上的图片轮换和播放功能。 Camera插件是针对HTML5和jQuery Mobile设计的，它充分利用了HTML5的新特性，如Canvas和Audio...
本文将详细介绍一个jQuery插件——jQuery粒子系统插件，并探讨其在网页设计中的应用。 jQuery粒子系统插件是一种动态效果插件，它能够生成充满活力的粒子动画，这些粒子可以是点、图形或文字，它们在页面上随机移动...
总结来说，"网页模板——jQuery可放大预览的图片滑块插件源码"是一个基于jQuery的网页组件，它实现了图片的滑动展示和放大预览功能，为用户提供了一个交互性强、视觉效果出色的图片浏览体验。通过分析和理解其源码，...
网页模板——jQuery Pagination 是一个基于JavaScript库jQuery的高效分页插件，用于在网页中实现数据的分页显示。在Web开发中，特别是在处理大量数据时，分页是一种常见的优化用户体验的方法，它允许用户逐步浏览...
**jQuery瀑布流插件——Wookmark** 在Web开发领域，瀑布流布局（Masonry Layout）已经成为一种流行的设计模式，特别是在展示图片或者内容时，它能够有效地利用空间，使页面看起来更加美观且易于浏览。而jQuery作为...