关于实现图片滚动

第一次使用博客,希望每天能记录点成长吧!加油

简单的实现了图片的滚动,有两种要求一种是图片的连续滚动,另一种是点击按钮发生滚动。

参考的列子:http://jingyan.baidu.com/article/e4511cf3122da32b845eafb3.html

连续滚动:

<script type="text/javascript">
        // 生活服务栏目图片连续滚动
        function scrolling() {
            // 获取每个dom
            var id = document.getElementById("scrollbox2");
            var ul = document.getElementById("scroll2");
            
            var li = ul.getElementsByTagName("li");
            iteamcount = li.length;
            // 每个图片容器的大小、
            liwidth = li[0].offsetWidth;
            marquee = function() {
                id.scrollLeft += 2;
                if (id.scrollLeft % width <= 1) {
                    // 当c.scrollleft和width相等的时候把第一个img追加到最后
                    ul.appendChild(ul.getElementsByTagName('li')[0]);
                    id.scrollLeft = 0;
                }
                ;
            };
            //值越小速度越快
            speed = 400;
            // 设置容器的长度
            ul.style.width = liwidth * iteamcount + 'px';
            var timer = setInterval(marquee, speed);
            ul.onmouseover = function() {
                clearInterval(timer);
            };
            ul.onmouseout = function() {
                timer = setInterval(marquee, speed);
            }
        }
        scrolling();
    </script>

点击滚动:

<script type="text/javascript">
    function _ScrollParse() {
        var scroll1 = document.getElementById("scroll1");
        var ol = scroll1.getElementsByTagName("ul")[0];
        var li = ol.getElementsByTagName("li");
        var prev = document.getElementById("prev8");
        var next = document.getElementById("next8");
        var length = li.length;
        var olwidth = length * 172;
        ol.innerHTML = ol.innerHTML + ol.innerHTML;
        function mover(oo) {
            if (oo == 1) {
                ol.style.left = ol.offsetLeft - 172 + 'px';
            } else {
                ol.style.left = ol.offsetLeft + 172 + 'px';
            }
            if (ol.offsetLeft < -olwidth) {
                ol.style.left = ol.offsetLeft + parseInt(olwidth) + 'px';
            } else if
                (ol.offsetLeft > 0)
            {
                ol.style.left = ol.offsetLeft - parseInt(olwidth) + 'px';
            }
        }
        prev.onclick = function() {
            mover(1);
        }
        next.onclick = function() {
            mover(2);
        }
    }
    _ScrollParse();
</script>


你可能感兴趣的:(关于实现图片滚动)