<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript 原生 左右滚动</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> *{ padding:0; margin:0} body{overflow: hidden;} .wrap{position: relative;width: 300px;height: 200px;margin: 30px auto;overflow: hidden;} .wrap .btn {position: absolute;z-index: 10;right: 10px;bottom: 10px} .wrap .btn li{list-style: none;height: 10px;width: 10px;border-radius: 5px;background: #000;margin: 0 5px;float: left;} .wrap .btn li.on{background: #fff} .wrap .con li{ float: left;width: 300px;height: 200px;position: relative; list-style: none;line-height: 200px;font-size: 50px;text-align:center;color: #fff} .wrap ul{width: 1500px} .next{position: absolute;font-size: 30px;right: 10px;top: 90px;cursor: pointer;} .prev{position: absolute;font-size: 30px;left: 10px;top: 90px;cursor: pointer;} </style> </head> <body> <div class="wrap" id="box"> <ul class="con" > <li style="background:red" class="en">1</li> <li style="background:#ccc;">2</li> <li style="background:blue;">3</li> <li style="background:#ccc;">4</li> <li style="background:blue;">5</li> </ul> <div class="next">></div> <div class="prev"><</div> </div> <script type="text/javascript"> /* times : 2013 - 7 - 12 ; form : enen */ var Slide = function(options){ var _that = this; this.timer = ""; this.curr= 0; this.boxID = this.getId(options.id); this.next= this.getClassName("next",this.boxID)[0] ; this.prev = this.getClassName("prev",this.boxID)[0] ; this.scrollBox = this.getClassName("con",this.boxID)[0]; this.init(); }; Slide.prototype = { init : function(){ this.btnNext(); this.btnPrev(); }, btnNext : function(){ var _that = this; this.next.onclick = function(){ if(_that.curr < 4){ _that.curr++; var w = -300*(_that.curr); _that.move(_that.scrollBox,{marginLeft:w}) } } }, btnPrev : function(){ var _that = this; this.prev.onclick = function(){ if(_that.curr > 0){ _that.curr--; var w = -300*(_that.curr); _that.move(_that.scrollBox,{marginLeft:w}) }; } }, move : function(ele,json,fn){ //json 参数是个对象 var _that = this; clearInterval(this.timer); this.timer = setInterval(function(){ var bBtn = true; for(var attr in json){ var iCur = 0; if( attr == 'opacity'){ iCur = Math.round(_that.getStyle(ele,attr)*100);//四舍五入 } else{ iCur = parseInt(_that.getStyle(ele,attr));//字符串转化为整数 } var iSpeed = (json[attr] - iCur)/7; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);//Math.ceil()向上取舍 12.7 或 12。3 》13；/Math.floor()向下取舍 if(iCur != json[attr]){ bBtn = false; } if(attr == 'opacity'){ ele.style.filter = 'alpha(opacity='+ (iCur+iSpeed) +')'; ele.style.opacity = (iCur+iSpeed)/100; } else{ ele.style[attr] = iCur + iSpeed + 'px'; } } if(bBtn){ clearInterval(ele.timer); if(fn){ fn.call(ele); } } },20); }, getId :function(id){ //获取ID return document.getElementById(id); }, getStyle:function(ele,value) { return ele.currentStyle?ele.currentStyle[value]:getComputedStyle(ele,null)[value]; //currentStyle属性 判断浏览器是ie 的时候，返回第一个值，其它浏览器就用getComputedStyle属性返回元素的值 }, getClassName : function(className,oParent){ //获取class 元素 var parent = oParent || document; var aEles = parent.getElementsByTagName('*'); var arr = []; for(var i=0; i<aEles.length; i++){ var aClass = aEles[i].className.split(' '); for(var j=0; j<aClass.length; j++){ if(aClass[j] == className){ arr.push(aEles[i]); } } } return arr; } } new Slide({id:"box"}) </script> </body> </html>