轮播图小实验

var Scoll=(function(auto_load){
	var util={
		$:function(node){
			return typeof node =="string" ? document.getElementById(node) : node;
		},
		$$:function(node,name){
			var elem=node.getElementsByTagName("*"),
				arr=[],
				reg=new RegExp("\\b"+name+"\\b","i"),
				i;
			for(i=0;i<elem.length;i++){
				if(elem[i].className.search(reg)!=-1){
					arr.push(elem[i]);
				}
			}
			return arr;
		}
	}	
	return {
		init:function(){
			auto_load.addEventListener("load",function(){
				var oUl=util.$("demo"),
					oLi=oUl.getElementsByTagName("li"),
					len=oLi.length,
					oliW=oLi[0].offsetWidth,
					prevBtn=util.$("prev"),
					nextBtn=util.$("next"),
					current=1;
				oUl.style.width=len*(oliW+20)+"px";

				timer=setInterval(function(){
					showImg(current);
					current++;

					if(current==len){
						current=0;
					}

				},1000)

			
				prevBtn.addEventListener("click",function(){
					clearInterval(timer);
					current-=1;
					if(current==-1){
						current=len-1;
					}
					showImg(current);
				},false);
				nextBtn.addEventListener("click",function(){
					clearInterval(timer);
					current+=1;
					if(current==len){
						current=0;
					}
					showImg(current);
				},false);

				function showImg(current){
					var nowLeft=-current*(oliW+20)
					oUl.style.left=nowLeft+"px";
				}

			},false)
		}
	}
})(window)
Scoll.init();

小布局：

<!doctype html>
<html>
<head>
    <title></title>
    <style type="text/css">
        ul,li,img{padding: 0;margin: 0;}
        #container{position:relative;width: 220px;margin: 0 auto;overflow: hidden; }
        ul#demo{position: relative;overflow: hidden;}
        ul#demo li{float: left;display: block;list-style: none; margin-right: 20px;border: solid 5px #333;border-radius: 5px;box-shadow: 5px 5px 5px black;} 
        ul#demo li img{width: 200px;height: 300px;}

        #prev{left: 100px;}
        #prev,
        #next{ width: 100px;height: 100px; display: block;position:absolute;background: black;color: white;line-height: 100px;text-align: center;font-size: 30px;cursor: pointer;top: 100px;}
        #next{ right: 100px;}
    </style>
    <script type="text/javascript" src="demo.js"></script>
</head>
<body style="postion:relative;">
    <div id="container">
        <ul id="demo" class="demo">
            <li><img src="1.jpg"></li>
            <li><img src="2.jpg"></li>
            <li><img src="3.jpg"></li>
            <li><img src="4.jpg"></li>
            <li><img src="5.jpg"></li>
            <li><img src="6.jpg"></li>
        </ul>
    </div>
    <span id="prev">PREV</span>
    <span id="next">NEXT</span>
</body>
</html>

　　代码有待改善凑合着用吧

轮播图 小实验

轮播图小实验