javascript原生小练习（二）--轮播图滚动效果

<pre name="code" class="javascript"><script type="text/javascript">
function setClass(obj,classname)
{
	//alert(obj.className)
	var reg =new RegExp("(\\s|^)" + classname + "(\\s|$)");//前面有空格或者以classname为开头，后面有空格或者以classname为结尾
	return {
		hasClass : obj.className.match(reg),
	    addClass : function(){
			if(!this.hasClass)
			{
				obj.className += " "+classname; 
			}
		},
	    removeClass : function(){
			if(this.hasClass)
			{
				
				obj.className = obj.className.replace(reg,"");
			}
		}
	}
}

function scrollFun(id)
{
	var scrollObj = document.getElementById(id).getElementsByTagName("div"),
		init = {
				timer : null,
				currentIndex : 0,
				con : {
						obj : scrollObj[0].getElementsByTagName("ul")[0],
						width : 400,
						len : scrollObj[0].getElementsByTagName("ul")[0].getElementsByTagName("li").length
					  },
				tit : scrollObj[1].getElementsByTagName("a"),
				btn : {
					  	prev : scrollObj[2].getElementsByTagName("a")[0],
					  	next : scrollObj[2].getElementsByTagName("a")[1]
					  },
				autoplay : false
		};
		autoChange();//自动播放
		for(var i = 0;i < init.tit.length;i++)
		{
			(function($i){
			  	init.tit.item(i).onclick = function(){
					show($i);
			  	}
			})(i);
			
		}
		init.btn.prev.onclick = function(){
				var index = init.currentIndex - 1;
				if( index >= 0)
					show(index);
			}
		init.btn.next.onclick = function(){
				var index = init.currentIndex + 1;
				if( index <= init.con.len - 1)
					show(index);
			}
		function autoChange(){
			init.autoplay = true;
			init.timer = setInterval(function(){
				var index = init.currentIndex + 1;
					if(index > init.con.len - 1)
					{
						index = 0;
					}
					show(index);
				},2500);
			
		}
		
		function show(index){
			clearInterval(init.timer);
			var cIndex = index - init.currentIndex,prevLeft = init.currentIndex * init.con.width,nowLeft = index * init.con.width,
			timer2 = setInterval(function(){
					if(Math.abs(prevLeft - nowLeft)>= 1)
					{
						if(cIndex > 0)
							prevLeft += init.con.width/20;
						else 
							prevLeft -= init.con.width/20;
						init.con.obj.style.left = "-" + prevLeft + "px";
						
					}
					else
					{
						init.currentIndex = index;
						init.con.obj.style.left = "-" + nowLeft + "px";
						for(var j = 0;j < init.tit.length; j++)
						{
							if(j == init.currentIndex)
							{
								setClass(init.tit[j],"current").addClass();
							}
							else
							{
								setClass(init.tit[j],"current").removeClass();
							}
						}
						clearInterval(timer2);
						if(init.autoplay)
						{
							autoChange();
						}
						
					}
					
				},10);
				
		}
	
}

window.onload = function(){
	scrollFun("js-scroll");
}
	

</script>

<div id="js-scroll">
	<div class="scroll-wrap">
    	<ul class="scroll-list">
        	<li class="item">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
            <li class="item">4</li>
        </ul>
    </div>
	<div class="scroll-tit">
    	<a class="item current">1</a>
        <a class="item">2</a>
        <a class="item">3</a>
        <a class="item">4</a>
    </div>
    <div class="scroll-btn">
    	<a class="btn prev">上一张</a>
        <a class="btn next">下一张</a>
    </div>
    
</div>

<style type="text/css">
*{margin:0;padding:0;list-style:none;}
#js-scroll{position:relative}
.scroll-wrap{width:400px;height:300px;overflow:hidden;position:relative;}
.scroll-list{width:20000em;height:100%;position:absolute;left:0;}
.scroll-list .item{float:left;width:400px;height:100%;background:#ddd;}
.scroll-tit .current{color:red;}
</style>