	一句话概述代码的用途：（例：使用js控制复制及输入数据时只能是数字） 120* 字
	代码类型：无函数类插件单段代码直接可运行
	TAG标签：（用空格隔开） 30 字
	描述说明：请填写代码的实现原理、应用场景、功能说明、调用示例、注意事项等。
	一款由jQuery插件实现的图片滚动代码，简单的图片分页效果，这里暂时没有添加图片，有需要的可自己在对应的标签中加入图片。本效果在IE8下是正常显示的，但没有测试其它浏览器的效果，应该也是不错的吧，希望想通过实例学习jQuery的朋友可不要错过这款网页特效代码哦。
	代码正文：*
	简单说明：排序： <!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>jQuery图片滚动代码</title> <style type="text/css"> h1{text-align:center;font-family:"微软雅黑";；font-size:30px;text-shadow:1px 2px 4px rgba(0,0,0,0.4);} .view-wrap ul{padding:0;margin:0;width:20000em;} .view-wrap li{list-style-type:none;float:left;width:120px;height:120px;background:#f0f0f0;border:solid 1px #ccc;margin-right:5px;text-align:center;line-height:120px;font-size:20px;font-weight:700;margin-left:5px;box-shadow:1px 2px 5px rgba(0, 0, 0, 0.2);} .view-wrap,.items{width:528px;overflow:hidden;height:124px;} .views-list{position:relative;width:530px;margin:0 auto;} .prev{left:-40px;top:0;} .next{position:absolute;right:-40px;} .prev,.next{position:absolute;height:120px;width:30px;background:#ccc;border:solid 1px #555;top:0;text-align:center;line-height:120px;color:#000;text-decoration:none;} .disabled-btn{opacity:0.5;filter:alpha(opacity=50);} </style> <script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function() { var page=1;//初始为第一版 var J_pro=$(".J_pro_view");//图片列表区域 var view_wrap=$(".view-wrap").width();//图片显示固定范围 var total=$(".J_pro_view li").length;//图片总数 var num=4;//每页显示的条数 var total_page=Math.round(total/num);//总页数 //下一页 $(".next").click(function(){ if (!J_pro.is(":animated")) { // 如果正处于动画中的则不进行动画 if (page == total_page) { // 最后一版，动画跳回第一版 $(this).addClass("disabled-btn"); return false; //J_pro.animate({"margin-left": "0px" }, 300);//如果是是最后一屏就回到第一屏 //page = 1; } else { // 跳到下一版 $(".prev").removeClass("disabled-btn"); $(this).removeClass("disabled-btn"); J_pro.animate({ "margin-left": "-=" + view_wrap }, 300); page++; } } }); //上一页 $(".prev").click(function(){ if (!J_pro.is(":animated")) { // 如果正处于动画中的则不进行动画 if (page == 1) { // 第一个版面，动画跳到最后一版 $(this).addClass("disabled-btn"); return false; //J_pro.animate({"margin-left": "-=" + view_wrap * (total_page - 1) }, 300);//如果是 //page = total_page; } else { // 跳到下一版 $(".next").removeClass("disabled-btn"); $(this).removeClass("disabled-btn"); J_pro.animate({ "margin-left": "+=" + view_wrap }, 300); page--; } } }); }) </script> </head> <body> <h1>简单的图片分页列表</h1> <div class="views-list"> <a href="javascript:void(0);" class="prev disabled-btn" rel="nofollow">《</a> <div class="view-wrap"> <div class="items"> <ul class="J_pro_view"> <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> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> </ul> </div> </div> <a href="javascript:void(0);" class="next" rel="nofollow">》</a> </div> </body> </html>