图片（水平方向）轮番滚动

js文件内容：

window.onload = function () {
    var oBox = document.getElementById("box");
    var oList = oBox.getElementsByTagName("ul")[0];
    var aImg = oBox.getElementsByTagName("img");
    var timer = playTimer = null;
    var index = i = 0;
    var bOrder = true;
    var aTmp = [];
    var aBtn = null;
    //生成数字按钮
    for (i = 0; i < aImg.length; i++) aTmp.push("<li>" + (i + 1) + "</li>"); //push放入数组
    //插入元素
    var oCount = document.createElement("ul");
    oCount.className = "count";
    oCount.innerHTML = aTmp.join(""); //join放入字符串
    oBox.appendChild(oCount);
    aBtn = oBox.getElementsByTagName("ul")[1].getElementsByTagName("li");
    //初始化状态
    cutover();
    //按钮点击切换
    for (i = 0; i < aBtn.length; i++) {
        aBtn[i].index = i;
        aBtn[i].onmouseover = function () { index = this.index; cutover() }
    }
    function cutover() {
        for (i = 0; i < aBtn.length; i++)
            aBtn[i].className = "";
        aBtn[index].className = "current";
        startMove(-(index * aImg[0].offsetWidth));
    }
    function next() {
        bOrder ? index++ : index--; //index=0;从第一幅图开始
        index <= 0 && (index = 0, bOrder = true);
        index >= aBtn.length - 1 && (index = aBtn.length - 1, bOrder = false)
        cutover()
    }
    playTimer = setInterval(next, 3000);


    //鼠标移入展示区停止自动播放
    oBox.onmouseover = function () { clearInterval(playTimer) };


    //鼠标离开展示区开始自动播放
    oBox.onmouseout = function () { playTimer = setInterval(next, 3000) };


    function startMove(iTarget) {
        clearInterval(timer);
        timer = setInterval(function () { doMove(iTarget) }, 30)
    }
    function doMove(iTarget) {
        var iSpeed = (iTarget - oList.offsetLeft) / 10;
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
        oList.offsetLeft == iTarget ? clearInterval(timer) : oList.style.left = oList.offsetLeft + iSpeed + "px";
    }
};

前端代码：

  <style type="text/css"> 
div,ul,li{margin:0;padding:0;}
ul{list-style-type:none;}
#box{position:relative;overflow:hidden;width:958px;height:500px;background:transparent;cursor:pointer; border:1px solid #000;}
#box .list{position:relative;width:300%;height:500px;overflow:hidden;}
#box .list ul{position:absolute;height:500px;}
#box .list li{width:958px;height:500px;overflow:hidden;float:left;padding:0px;}
#box .list li img{height:500px; width:958px;}
#box .count{position:absolute;right:14px;bottom:5px;}
#box .count li{color:#fff;float:left; text-align:center; width:19px;height:19px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;}
#box .count li.current{color:#fff;font-weight:600;background:#6cf;}
</style>

<div id="box">
    <div class="list">
        <ul>
             <li>
                 <img src="img/123.jpg" />
             </li>
             <li>
                 <img src="img/234.jpg" />
             </li>
             <li>
                 <img src="img/345.jpg" />
             </li>
        </ul>
    </div>
</div>