HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Cache-Control" content="no-transform " /> <title>无标题文档</title> <script type="text/javascript" src="jquery-1.10.1.js"></script> <style type="text/css"> ul,ol,li{list-style:none;} .box{width:320px; height:240px;} .box ul li {float:left; position:absolute; display:none;width:320px; height:240px;} </style> </head> <body> <div class="box"> <ul> <li><a href="#" target="_blank"><img src="images/1.jpg" width="350" height="240" /></a></li> <li><a href="#" target="_blank"><img src="images/2.jpg" width="350" height="240" /></a></li> <li><a href="#" target="_blank"><img src="images/3.jpg" width="350" height="240" /></a></li> <li><a href="#" target="_blank"><img src="images/4.jpg" width="350" height="240" /></a></li> <li><a href="#" target="_blank"><img src="images/5.jpg" width="350" height="240" /></a></li> <li><a href="#" target="_blank"><img src="images/6.jpg" width="350" height="240" /></a></li> </ul> </div> <input class="prev" type="button" value="向上" /> <input class="next" type="button" value="向下" /> </body> </html> <strong></strong>
Javascript:
$(function(){ var Get_next_j=$('.box ul li'); var Set_css_item={'display':'list-item','position':'relative','float':'left'}; var Set_css_none={'display':'list-item','position':'absolute','float':'left'}; var Set_time=2000; var i=0; Get_next_j.first().css(Set_css_item); $('.next').click(function(){ if(!Get_next_j.eq(i).next().html()) { Get_next_j.last().fadeOut(Set_time).css(Set_css_none); Get_next_j.first().fadeIn(Set_time).css(Set_css_item); i=0; } else{ Get_next_j.eq(i).fadeOut(Set_time).css(Set_css_none); Get_next_j.eq(i).next().fadeIn(Set_time).css(Set_css_item); i=i+1;} }); $('.prev').click(function(){ if(i==0){ Get_next_j.first().fadeOut(Set_time).css(Set_css_none); Get_next_j.last().fadeIn(Set_time).css(Set_css_item); Get_next_j.each(function(index,element){ i=index; }); } else{ Get_next_j.eq(i).fadeOut(Set_time).css(Set_css_none); Get_next_j.eq(i).prev().fadeIn(Set_time).css(Set_css_item); i=i-1;} }); });