Jquery实现简单的图片滚动效果

来源：互联网发布：结婚照下载什么软件编辑：程序博客网时间：2024/04/29 21:42
<!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=utf-8" /><title>图片滚动</title><script type="text/javascript" src="js/jquery-1.9.1.js"></script><style type="text/css"> body,ul,li { padding:0; margin:0} ul,li { list-style:none}.person_pic{ width:72%; height:auto; margin-top:18%; margin-left:28%;}.per-pic-scroll {height:200px; position:relative;margin-top:5%; margin-left:10px;}.per-pic-scroll .pre,.per-pic-scroll .next { position:absolute; display:block; width:35px; height:50px; background-color:#999999;top:23px; color:#FFF; text-align:center; line-height:50px;}.per-pic-scroll .pre { left:16px}.per-pic-scroll .next { right:50px}.img-list { position:relative; width:78%; height:150px; margin-left:60px; overflow:hidden}.img-list ul { width:200%;} //这里一定要大点.img-list li { float:left; display:inline; width:135px; margin-right:10px; height:150px; background-color:#BDBDDF; text-align:center; line-height:100px;}.img-list li img{width:135px; height:150px;}.per-pic-scroll a{ text-decoration:none; }</style><script type="text/javascript">function Per_pic_scroll(){   var pre_person , next_person , image , wid;  pre_person = $(".pre") , next_person = $(".next") , image = $(".img-list").find('ul');  wid = $(".img-list").find('ul').find("li").outerWidth(false);  next_person.click(function(){image.animate({'margin-left':-wid},function()  {   image.find('li').eq(0).appendTo(image);      image.css({'margin-left':0});   });});  pre_person.click(function(){image.find('li:last').prependTo(image);image.css({'margin-left':-wid});image.animate({'margin-left':0});});}$(function(){ Per_pic_scroll();})</script></head><body> <div class="person_pic"><div class="per-pic-scroll"> <span class="pre"><a href="#" onclick="return false"><</a></span> <span class="next"><a href="#" onclick="return false">></a></span> <div class="img-list"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li></ul>  </div>  </div>  </div></body></html>
0 0