昨天看到一个网站上使用了图片横排，自动显示的功能，觉得很炫，很想研究下，就研究了一下，发现用jquery的插件做很简单。
1.使用插件carouFredSel，
View Code
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script language="javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="Scripts/jquery.carouFredSel-6.2.0.js" language="javascript"></script> <script src="Scripts/jquery.carouFredSel-6.2.0-packed.js" language="javascript"></script> <link href="~/Styles/1.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript"> $(document).ready(function () { $('#slider').carouFredSel({ items:3, auto:true }); }); </script> <style> #maindiv { margin-left:200px; margin-top:100px; width:960px; overflow:hidden; } .mainimag { height:535px; width:4000px; position:relative; } #prev { top:300px; position:absolute; } #prefix { width:960px; } #next { top:300px; right:280px; position:absolute; } </style> </head> <body> <form id="form1" runat="server"> <div id="maindiv"> <div class="mainimag" id="slider"> <img id="slider1" src="images/1.jpg"/> <img id="slider2" src="images/2.jpg" /> <img id="slider3" src="images/3.jpg"/> <img id="slider4" src="images/4.jpg"/> </div> <div id="prefix" > <img id="prev" src="images/previous.png"/> <img id="next" src="images/next.png"/> </div> </div> </form> </body> </html>
实例在附件中。实例如此网站http://fiveplus.trendy-global.com/html/cn/default.html#