左右按钮-自动滚动

js代码：

function lrAuto(overHide, leftBtn, rightBtn, num){
    //获取前3个参数
    var doc = document,
        overHide = doc.getElementById(overHide),
        leftBtn = doc.getElementById(leftBtn),
        rightBtn = doc.getElementById(rightBtn);
    //判断内容太少不需要滚动和按钮
    var    scrollUl = overHide.getElementsByTagName('ul')[0],
        liArr = scrollUl.getElementsByTagName('li'),
        liLen = liArr.length,
        len = liLen*2;
    if (liLen*num <= overHide.offsetWidth){
        leftBtn.style.visibility = 'hidden';
        rightBtn.style.visibility = 'hidden';
    }else{
        //复制ul内容
        scrollUl.style.width = len * num + 'px';
        var    fragment = document.createDocumentFragment();
        for (var i = 0; i < liLen; i++){
            var copyLi = document.createElement('li');
            copyLi.innerHTML = liArr[i].innerHTML;
            fragment.appendChild(copyLi);
        }
        scrollUl.appendChild(fragment);
        var setTimeId;
        //滚动方法
        function stepL(obj, step){
            clearTimeout(setTimeId);//清楚自动滚动
            var n = 0, m = obj.scrollLeft;
            function scrollL(){
                if (n < step){
                    obj.scrollLeft += 10;
                    n += 10;
                    var comeon = setTimeout(scrollL, 20);//渐增
                }else{
                    clearTimeout(comeon);//清楚渐增
                    obj.scrollLeft = m + step;
                    if (obj.scrollLeft == len*num/2){
                        obj.scrollLeft = 0;
                    }
                    setTimeId = setTimeout(autoScroll, 3000);//调用自动滚动
                }
            }
            scrollL(obj, step);
        }
        function stepR(obj, step){
            clearTimeout(setTimeId);
            if (obj.scrollLeft == 0){
                obj.scrollLeft = len*num/2;
            }
            var n = step, m = obj.scrollLeft;
            function scrollR(){
                if (n > 0){
                    obj.scrollLeft -= 10;
                    n -= 10;
                    var comeon = setTimeout(scrollR, 20);
                }else{
                    clearTimeout(comeon);
                    obj.scrollLeft = m - step;
                    setTimeId = setTimeout(autoScroll, 3000);
                }
            }
            scrollR(obj, step);
        }
        //自动滚动事件
        function autoScroll(){
            stepL(overHide, num);
        }
        setTimeId = setTimeout(autoScroll, 3000);
        //点击左右按钮事件
        leftBtn.onclick = function(){
            if (overHide.scrollLeft % num == 0){
                clearTimeout(setTimeId);
                stepR(overHide, num);
            }
        }
        rightBtn.onclick = function(){
            if (overHide.scrollLeft % num == 0){
                clearTimeout(setTimeId);
                stepL(overHide, num);
            }
        }
    }    
}

lrAuto('scroll_hide', 's_L', 's_R', 145);

lrAuto(overHide, leftBtn, rightBtn, num)参数说明：
overHide：滚动外边的框id，里边超出的内容会隐藏；
leftBtn：左按钮id；
rightBtn：右按钮id；
145：步长，步长，每次滚动的长度，即一个Li宽度加间距。

html代码：

<div class="scroll_box">
    <span id="s_L">左移</span>
    <div id="scroll_hide">
        <ul>
            <li><img src="images/video_pic.gif" alt="" />炫酷3D技能展示1</li>
            <li><img src="images/video_pic.gif" alt="" />房贷首付开发2</li>
            <li><img src="images/video_pic.gif" alt="" />看见了离开3</li>
            <li><img src="images/video_pic.gif" alt="" />哦开发量；上的4</li>
        </ul>
    </div>
    <span id="s_R">右移</span>
</div>

 

css代码：

div,ul,li{ margin:0; padding:0; font-size:12px;}
ul{list-style:none;}
.scroll_box{ width:630px; height:113px; padding:10px 5px 0; background:url(../images/video.jpg) 0 -609px no-repeat;}
#s_L,#s_R{ display:block; width:21px; height:68px; margin-top:12px; background:url(../images/video.jpg); text-indent:-9999px; cursor:pointer;}
#s_L{ float:left; background-position:0 0;}
#s_R{ float:right; background-position:-22px 0;}
#scroll_hide{ display:inline; float:left; width:580px; margin-left:4px; overflow:hidden;}
#scroll_hide ul{ overflow:hidden}
#scroll_hide ul li{ display:inline; float:left; width:135px; margin:0 5px; text-align:center; color:#857b90;}
#scroll_hide ul li img{ display:block; width:135px; height:84px; margin-bottom:5px;}

滚动内容需用ul和li布局。