可控制的左右滚动

在此之前，针对页面中的这种效果，一直用sina的某高人写的脚本，因为写的真的不错，可扩展性很强，但是在ie8面世之后，却发现在ie8中不兼容，所有滚动元素只能在可视范围内滚动一次。

既然如此，这个脚本就不能再用了，毕竟随着win7被炒的越来越热，而ie8又预装在win7中，所以不得不考虑不兼容ie8了。无奈了，自己写个吧，呵呵，其实自己还是很懒的（能偷懒就偷懒），套用懒人图库的一句经典，“学会偷懒，并懒出境界是提高工作效率最有效的办法！”，好像是在为自己的懒惰找借口，又扯远了，勿怪 -.-! 贴图：

运行以下代码查看demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>点击左右滚动（可设置自动滚动）---振之博文</title>
<style type="text/css">
*{ margin:0; padding:0;}
img ,a img , a:hover img{ border:0;}
h1{ text-align:center; margin-top:25px;}
.wrapper{ width:700px; margin:30px auto 0; border:1px solid #d5d5d5; overflow:hidden; padding-bottom:20px; background:#f7f7f7;}
#leftbtn{ float:left; margin:20px 0 0 10px; cursor:pointer;}
#container{ width:600px; overflow:hidden; float:left; margin:34px 0 0 10px; display:inline;}
#container ul{ float:left;}
#container li{ float:left; list-style:none; width:140px; padding:0 5px; overflow:hidden;}
#rightbtn{ float:right; margin:20px 10px 0 0; cursor:pointer;}
#copyright{ width:700px; margin:60px auto 0;}
dl{ width:700px; color:#777; margin:12px auto 0; line-height:22px; word-break:break-all;}
dl dt{ font-weight:bold;}
dl dd{ margin-top:6px;}
</style>
</head>

<body>
<h1>点击左右滚动（可设置自动滚动）</h1>
<div class="wrapper">
    <img src="http://images.cnblogs.com/cnblogs_com/zhenn/283408/r_leftbtn.jpg" alt="" id="leftbtn" />
    <div id="container">
        <ul>
        	<li><a href="http://www.men-ideal.com"><img src="http://images.cnblogs.com/cnblogs_com/zhenn/283408/r_1.jpg" width="140" /></a></li>
        	<li><a href="http://www.men-ideal.com"><img src="http://images.cnblogs.com/cnblogs_com/zhenn/283408/r_2.jpg" width="140" /></a></li>
        	<li><a href="http://www.men-ideal.com"><img src="http://images.cnblogs.com/cnblogs_com/zhenn/283408/r_3.jpg" width="140" /></a></li>
        	<li><a href="http://www.men-ideal.com"><img src="http://images.cnblogs.com/cnblogs_com/zhenn/283408/r_4.jpg" width="140" /></a></li>
        </ul>
    </div>
    <img src="http://images.cnblogs.com/cnblogs_com/zhenn/283408/r_rightbtn.jpg" alt="" id="rightbtn" />
</div>
<dl>
	<dt>使用方法：</dt>
	<dd>1，必须设置pageWidth能够整除space，并且保证pageWidth(翻页宽度)和li的宽度（包括padding-left,padding-right在内）一致。原因很简单，保证zhennScroll.container.scrollLeft%zhennScroll.pageWidth==0条件的成立，从而达到清除计时器的目的！</dd>
	<dd>2，设置li的css样式值时，不要设置margin-left,margin-right，会导致计算不准确，要用padding-left,padding-right代替之！</dd>
	<dd>3，当ul的总宽度小于container的宽度时，不会滚动，只有超过这个宽度才会滚动，否则会有bug.</dd>
</dl>
<div id="copyright"><a href="http://www.men-ideal.com">振之博文</a> 版权所有 转载请说明出处</div>
<script type="text/javascript">
function $(id){
    return document.getElementById(id);
}

//定义滚动对象
var zhennScroll = {
    //容器
    container: $("container"),
    //左按钮
    leftbtn: $("leftbtn"),
    //右按钮
    rightbtn: $("rightbtn"),
    //是否自动滚动
    autoScroll: false,
	childElem1: null,
	childElem2: null,
    //定时器
    timer: null,
    //速度，值越大，滚动越慢
    speed: 20,
    //移动的单位距离，值越小，滚动越快
    space: 5,
	//翻页宽度
	pageWidth: 150, 
    //初始化
	num: 0,
    init: function(){
        this.container.innerHTML = "<div style=\"width:9999px;\" >" + this.container.innerHTML + "</div>";
        this.childElem1 = this.container.getElementsByTagName("ul")[0];
        this.childElem2 = document.createElement("ul");
        var infinityDiv = this.container.getElementsByTagName("div")[0];
        infinityDiv.appendChild(this.childElem2);
		
		
        if(this.childElem1.offsetWidth>=this.container.offsetWidth){
			this.childElem2.innerHTML = this.childElem1.innerHTML;
			//当自动滚动时
			if(this.autoScroll==true){
				this.timer = setInterval(this.scrollleft,this.speed);
				this.container.onmouseover = function(){
					clearInterval(zhennScroll.timer);
				}
				this.container.onmouseout = function(){
					zhennScroll.timer = setInterval(zhennScroll.scrollleft,zhennScroll.speed);
				}
			}else{   //点击按钮才可以滚动
				//增加鼠标监听
				//点击左边按钮，则向左滚动
				this.leftbtn.onclick = function(){
					if(zhennScroll.container.scrollLeft%zhennScroll.pageWidth==0){ //防止设置多个timer
						zhennScroll.timer = setInterval(zhennScroll.scrollleft,zhennScroll.speed);
					}
				}
				//点击右边按钮，则向右滚动
				this.rightbtn.onclick = function(){
					if(zhennScroll.container.scrollLeft%zhennScroll.pageWidth==0){ //防止设置多个timer
						zhennScroll.timer = setInterval(zhennScroll.scrollright,zhennScroll.speed)
					}
				}
			}
			//初始化操作，强制回到初始位置
			this.container.scrollLeft = 0;
        }
    },
	//左滚动方法
	scrollleft: function(){
		if(zhennScroll.container.scrollLeft>=zhennScroll.childElem1.offsetWidth){
			zhennScroll.container.scrollLeft -= zhennScroll.childElem1.offsetWidth;
		}else{
			zhennScroll.container.scrollLeft += zhennScroll.space;
		}
		if(!zhennScroll.autoScroll&&zhennScroll.container.scrollLeft%zhennScroll.pageWidth==0&&zhennScroll.container.scrollLeft>0){
			clearInterval(zhennScroll.timer);
		}
	},
	//右滚动方法
	scrollright: function(){
		if(zhennScroll.container.scrollLeft<=0){
			zhennScroll.container.scrollLeft += zhennScroll.childElem1.offsetWidth;
		}else{
			zhennScroll.container.scrollLeft -= zhennScroll.space;
		}
		if(!zhennScroll.autoScroll&&zhennScroll.container.scrollLeft%zhennScroll.pageWidth==0&&zhennScroll.container.scrollLeft<zhennScroll.childElem1.offsetWidth){
			clearInterval(zhennScroll.timer);
		}
	}
	
}

window.onload = function(){
	zhennScroll.init();
};
</script>
</body>

</html>

虽然扩展性行不是太好，但是应用还是比较简单滴，所有滚动参数都可以在滚动类（zhennScroll）的属性中设置（包括设置是否自动滚动），相信稍有javascript基础都可以看懂的。

posted on 2011-02-20 00:02 zhenn 阅读(1423) 评论(0) 编辑收藏举报

刷新页面返回顶部

关于我

振之博文

可控制的左右滚动

公告

导航