jQuery图片滚动演示效果，简单图片分页

最新推荐文章于 2021-04-10 20:14:38 发布

cuikuang6306

最新推荐文章于 2021-04-10 20:14:38 发布

阅读量182

点赞数

文章标签： javascript xhtml ViewUI

点击(此处)折叠或打开

<!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>
<FCK: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=\"/images/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);\" _fcksavedurl=\"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);\" _fcksavedurl=\"javascript:void(0);\" class=\"next\" rel=\"nofollow\">》</a>
</div>
</body>
</html>
<br><br><FCK:hr />