首页 > 帮忙看下为什么左右点击按钮的that.Ul.style.left值怎么写才能移动

帮忙看下为什么左右点击按钮的that.Ul.style.left值怎么写才能移动

这里的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="">&lt;</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="">&gt;</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最后的括号位置写反了。

【热门文章】
【热门文章】