这里的that.Ul.style.left值 怎么写才能保存住上次的值
// css 部分
*{
margin: 0;
padding: 0;
}
.scroll{
overflow: hidden;
clear: both;
width: 1200px;
margin: 0 auto;
position: relative;
}
.scroll li{
width: 280px;
float: left;
list-style: none;
}
.scroll .pre{
width:30px;
height: 240px;
line-height: 240px;
background: #ccc;
float: left;
text-align: center;
font-size: 18px;
font-weight: bold;
margin-right: 10px;
position: absolute;
}
.scroll .next{
right: 0;
}
.scroll .pre a{
display: block;
text-decoration: none;
}
.scroll ul{
width: 1000000px;
overflow: hidden;
float: left;
left: 0;
position: absolute;
transition: all 0.5s ease 0s;
}
.scroll .active,.scroll .pre a:hover{
background: #05c0e2;
color:#fff;
}
.last{
background: #ccc;
}
#jsulbox{
width:1100px;
overflow: hidden;
height: 240px;
left:40px;
overflow: hidden;
position: relative;
float: left;
}
.prenext{
width: 100%;
}
//HTML 部分
<div class="scroll">
<div class="pre" id="js-pre"><a href=""><</a></div>
<div id="jsulbox">
<ul id="jsul">
<li class="item"><a href="#"><img src="style/imgs/tu.jpg" alt=""></a></li>
<li class="item"><a href="#"><img src="style/imgs/tu1.jpg" alt=""></a></li>
<li class="item"><a href="#"><img src="style/imgs/tu2.jpg" alt=""></a></li>
<li class="item"><a href="#"><img src="style/imgs/tu3.jpg" alt=""></a></li>
<li class="item"><a href="#"><img src="style/imgs/tu.jpg" alt=""></a></li>
<li class="item"><a href="#"><img src="style/imgs/tu1.jpg" alt=""></a></li>
<li class="item"><a href="#"><img src="style/imgs/tu2.jpg" alt=""></a></li>
<li class="item"><a href="#"><img src="style/imgs/tu3.jpg" alt=""></a></li>
</ul>
</div>
<div class="pre next active" id="js-next"><a href="">></a></div>
</div>
// javascript 部分
<script>
function Scroll(o){
this.Ul = document.getElementById(o.Ul);
this.li = document.getElementsByTagName(o.li);
this.liLen = (this.li).length;
this.pre = document.getElementById(o.pre);
this.next = document.getElementById(o.next);
this.autoCounter = null;
this.autoplayTime = 3000;
this.slideNow = 0;
this.liWidth = o.liWidth;
this.ulWidth = this.liLen * this.liWidth;
this.isAuto = true || false;
this.jsulbox = o.jsulbox;
this.showLi = parseInt((this.jsulbox)/this.liWidth);
this.hideLi = this.liLen - this.showLi;
this.init();
}
Scroll.prototype.init = function(){
var that = this;
addEvent(this.pre,"click",scrollLeft);
addEvent(this.next,"click",scrollRight);
//自动播放
function autoplay(){
if( that.isAuto === true ){
that.autoCounter = setInterval(function(){
scrollRight();
},that.autoplayTime);
}
}
//向左滚动
function scrollLeft(){
clearInterval(that.autoCounter);
that.slideNow--;
if( that.slildeNow >=0 ){
that.Ul.style.left += -( that.liWidth * that.slideNow ) + "px";
}else{
that.Ul.style.left = 0 + "px";
}
}
//向右滚动
function scrollRight(){
clearInterval(that.autoCounter);
that.slideNow++;
if( that.slideNow < that.hideLi ){
that.Ul.style.left += -( that.liWidth * that.slideNow ) + "px";
}else{
that.slideNow = that.hideLi;
that.ul.style.left += - (that.liWidth * that.hideLi) + "px";
}
}
// 添加事件
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){
obj.attachEvent("on"+type,fn);
}
}
//调用自动滚动
autoplay();
};
var scrollpic = new Scroll({
Ul :"jsul",
li :"li",
pre : "js-pre",
next : "js-next",
liWidth : "280",
isAuto : "true",
jsulbox : "1100"
)}
</script>
用计算后的样式。
还有你js最后的括号位置写反了。