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="jQuery施用相关插件——图片浏览" /></li> <li> <img src="images/02.jpg" alt="jQuery施用相关插件——图片浏览" /></li> <li> <img src="images/03.jpg" alt="jQuery施用相关插件——图片浏览" /></li> <li> <img src="images/04.jpg" alt="jQuery施用相关插件——图片浏览" /></li> <li> <img src="images/05.jpg" alt="jQuery施用相关插件——图片浏览" /></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;}??