js分页效果

Html

Css

* {
	margin:0;
	padding:0;
}
img {
	border:0;
}
ol,ul,li {
	list-style:none;
}
.box {
	width:100%;
	height:500px;
	position:relative;
}
#conten {
	width:400px;
	height:410px;
	margin:20px auto;
	border:1px solid #ccc;
	overflow:hidden;
}
#conten li {
	width:100%;
	height:40px;
	border-bottom:1px solid #ff0000;
}
#btn {
	width:180px;
	height:30px;
	margin:20px auto;
	border:1px solid #ccc;
	padding:5px 10px;
	position:relative;
	overflow:hidden;
}

window.onload = function() {
    var oConten = document.getElementById("conten");
    var oLi = oConten.getElementsByTagName("li");
    var bBtn = document.getElementById("btn");

var aLi = bBtn.getElementsByTagName("li");
    for (var i = 0; i <= n - 1; i++) {
        aLi[i].index = i;
        aLi[0].style.background = "#ccc";
        aLi[i].style.left = i * 40 + "px"
        // alert(aLi[i].index)

aLi[i].onclick = function() {
            b = this.index;
            // alert(b)
            // 页码初始化
            for (var j = 0; j < aLi.length; j++) {
                aLi[j].style.background = "#ff0000";
            }
            this.style.background = "#ccc";
            //页码滚动
            if (b <= 2) {
                for (var j = 0; j < aLi.length; j++) {
                    aLi[j].style.left = j * 40 + "px"
                }
            }
            if (b > 2 && b < (n - 2)) {
                for (var j = 0; j < aLi.length; j++) {
                    aLi[j].style.left = (j - b + 2) * 40 + "px";
                }
            }
            //页面切换
            for (var j = 0; j < oLi.length; j++) {
                oLi[j].style.display = "none";
            }
            for (var j = (b * 10); j < (b + 1) * 10; j++) {
                oLi[j].style.display = "block";
            }
        }
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js分页效果



代码描述：可自动增添翻页，自适应页码

页码可以适应内容的多少，自动增加页码

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

qready

相关代码

js分页效果

最新