Web 页面 工具栏图标较多情况下的简单翻页
来源：互联网 发布：linux cp dir 编辑：程序博客网 时间：2024/06/10 04:36
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> #imgToL{ width:15px;height:100px;cursor:pointer; float:left;border:1px solid red;display:none; } #imgToR{ width:15px;height:100px;cursor:pointer; float:left;border:1px solid red;display:none; } #imgToB{ width:15px;height:100px;cursor:pointer; float:left;border:1px solid gray; } .imgIcon{ width:100px;height:100px;float:left;border:1px solid blue; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { setImgs(false); }); //设置图片， 参数showLast: 是否强制显示最后一个图片 function setImgs(showLast) { //全部显示 $(".imgIcon").show(); //计算一行中最大的容纳空间 var space = $("#imgToB").parent().width() - $("#imgToB").width(); //计算一行中最大的容纳个数 var maxNum = Math.floor(space / $(".imgIcon:first").width()); //如果最大的容纳个数能容纳全部图片 if (maxNum >= $(".imgIcon").length) { $("#imgToL,#imgToR").hide(); return; } //否则， 应该显示左右箭头, 并重新计算每行最大容纳个数 $("#imgToL,#imgToR").show(); space = space- $("#imgToL").width() - $("#imgToR").width(); maxNum = Math.floor(space / $(".imgIcon:first").width()); //将可容纳最大个数加在元素上， 方便后面存取 $("#imgToB").data("maxNum", maxNum); var imgNum = $(".imgIcon").length; //如果不要求强制显示最后面的，则可显示最大数量之后的图片全部隐藏 if (!showLast) { $(".imgIcon:gt(" + (maxNum-1) + ")").hide(); } else { var hideNum = imgNum - ( imgNum % maxNum ==0 ? maxNum : imgNum % maxNum ); $(".imgIcon:lt(" + hideNum + ")").hide(); } } function moveToLR(toL) { var maxNum = $("#imgToB").data("maxNum"); //如果是往左翻页 if (toL) { //取得第一个显示的图片的索引 var firstId = $(".imgIcon:visible:first").index()-1;//注：从1开始 if (firstId == 0) return; $(".imgIcon").hide().each(function (index) {//注：从0开始 if (index < firstId && index >= firstId - maxNum) { $(this).show(); } }); } else { //取得第一个和最后一个显示的图片的索引 var lastId = $(".imgIcon:visible:last").index()-1; if (lastId == $(".imgIcon").length-1) return; $(".imgIcon").hide().each(function (index) { if (index > lastId && index <= lastId + maxNum) { $(this).show(); } }); } } //添加图片 function addImg() { var $imgNew = $(".imgIcon:last").clone(); $imgNew.html(parseInt($imgNew.html()) + 1); $(".imgIcon:last").after($imgNew); setImgs(true); } </script></head><body> <table border="1" cellpadding="1" cellspacing="1" style="" > <tr> <td style="width:500px;" > <div id="imgToL" onclick="moveToLR(true)" ><</div> <div class="imgIcon">1</div> <div class="imgIcon">2</div> <div class="imgIcon">3</div> <div class="imgIcon">4</div> <div class="imgIcon">5</div> <div id="imgToR" onclick="moveToLR(false)" >></div> <div id="imgToB" onclick="addImg()" >add</div> </td> </tr> </table></body></html>
