您的位置：首页 > Web前端 > JavaScript

javascript 原生 左右滚动

2013-07-12 12:51 344 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航