html
<div class="t2" id="container"> <div class="t2l f_l" id="btnNext"></div> <div class="t2c f_l" id="listBox"> <div id="list"> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝1</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝2</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝3</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝4</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝5</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝6</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝1</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝2</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝3</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝4</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝5</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝6</a></dd> </dl> </div> </div> <div class="t2r f_l" id="btnPrev"></div> <img src="images/famous.png" width="50" height="155" class="t2Position" /> </div>
css
/*第二区样式*/ .t2{ width:980px; height:214px; background:url(../images/t2Bg.gif) repeat-x; margin:13px auto 0 auto; border-bottom:2px solid #f09; border-top:6px solid #f09; position:relative;} .t2l{ width:100px; height:214px; background:url(../images/onLeft.gif) no-repeat 63px 84px;} .t2c{ width:816px; height:180px; overflow:hidden;} .t2c dl{ width:136px; padding-top:20px;} .t2c dl dt{ } .t2c dl dt img{ width:105px; height:123px; border:1px solid #ccc; display:block; padding:4px;} .t2c dl dd{ width:115px; text-align:center; padding-top:8px;} .t2c dl dd a{ font-size:14px; color:#f09; font-size:14px; font-weight:bold;} .t2r{ width:50px; height:214px; background:url(../images/onRight.gif) no-repeat 0px 84px;} .t2Position{ position:absolute; left:-7px; top:30px;}
引用
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="js/jquery.imageScroller.js"></script> <script type="text/javascript"> $(function () { $("#listBox").imageScroller({ next: "btnNext", prev: "btnPrev", frame: "list", child: "dl", auto: true }); }); </script>
效果图: