使用jquery 建立图片轮播效果。基于对象，可扩展
<!DOCTYPE html><html><head> <title></title> <style> .out_pic{ width: 320px; height: 220px; position: relative; background: #ffffff; border: 1px #dddddd solid; padding: 5px; overflow: hidden; } .inner_pic{ position: absolute; left: 0; top: 0; list-style: none; margin: 5px; padding: 0; width: 975px; } .inner_pic li{ list-style: none; padding: 0; float: left; margin-right: 5px; } .inner_pic li img{ width: 320px; height: 220px; } .pic_control { position: absolute; top: 40%; cursor: pointer; width: 40px; height: 40px; margin-top: -20px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 60px; font-weight: 100; line-height: 30px; color: #fff; text-align: center; background: #222; border: 3px solid #fff; -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 23px; opacity: .5; filter: alpha(opacity=50); } .pic_control:hover{ opacity: .7; filter: alpha(opacity=70); } .pic_prev{ left: 15px; } .pic_next{ right: 15px; left: auto; } </style> <script src="http://code.jquery.com/jquery-1.8.3.min.js"> </script> <script> $(document).ready(function(){ var carousel=function(option){ this.carousel_inner_ul=option.carousel_inner_ul; this.count=option.count; this.width= this.carousel_inner_ul.width(); this.per_width=this.width/this.count; this.index=1; } carousel.prototype={ moveTo:function(index){ if(index>this.count)index=1; if(index<1)index=this.count; this.carousel_inner_ul.animate({"left":+(-(index-1)* this.per_width)+'px'},400); this.index=index; }, next:function(){ this.moveTo(++this.index); }, prev:function(){ this.moveTo(--this.index); } } var mycarousel=new carousel({ carousel_inner_ul:$('.inner_pic'), count:3 }); $('.pic_prev').click(function(){ mycarousel.prev(); }); $('.pic_next').click(function(){ mycarousel.next(); }); }); </script></head><body> <div class="out_pic"> <ul class="inner_pic"> <li><img src="img/1.jpg"></li> <li><img src="img/2.jpg"></li> <li><img src="img/3.jpg"></li> </ul> <a class="pic_prev pic_control">‹</a> <a class="pic_next pic_control">›</a> </div></body></html>
?
