jQuery使用相关插件——图片浏览
效果图 （这个使用了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;
}