图片、文字垂直和水平循环滚动播放

 <div id="marquee" style="overflow:hidden;width:200px;text-align:center; height:240px;">

<div id="child_1">

/*

循环滚动播放的内容(文字或图片)

*/

<div id="child_2"></div>

</div>

</div>

 //垂直循环滚动

<script language="javascript" type="text/javascript">
                var pic_speed = 50; //循环滚动速度，速度越小滚动越快
                var child_2 = document.getElementById("child_2");
                var child_1 = document.getElementById("child_1");
                var marquee = document.getElementById("marquee");
                //marquee_11.scrollTop = marquee_11.scrollHeight;//开始显示时，显示最后的内容
                if (child_2.offsetTop > 240) {//如果容器不超过240像素 则不循环滚动
                    child_2.innerHTML = child_1.innerHTML
                    function MarqueeUp() {
                        if (child_2.offsetTop - marquee.scrollTop <= 0) {
                            marquee.scrollTop -= child_2.offsetHeight
                        }
                        else {
                            marquee_11.scrollTop++;
                        }
                    }

                    var MarUp = setInterval(MarqueeUp, pic_speed)
                    marquee.onmouseover = function() { clearInterval(MarUp) }
                    marquee.onmouseout = function() { MarUp = setInterval(MarqueeUp, pic_speed) }
                }
        </script>

 

 //水平循环滚动

 

<script language="javascript" type="text/javascript">
                var pic_speed = 50; //循环滚动速度，速度越小滚动越快
                var child_2 = document.getElementById("child_2");
                var child_1 = document.getElementById("child_1");
                var marquee = document.getElementById("marquee");
                //marquee_11.scrollTop = marquee_11.scrollHeight;//开始显示时，显示最后的内容
                child_2.innerHTML = child_1.innerHTML
                    function MarqueeUp() {
                        if (child_2.offsetWidth - marquee.scrollLeft <= 0) {
                            marquee.scrollLeft -= child_2.offsetWidth
                        }
                        else {
                            marquee_11.scrollLeft++;
                        }
                    var MarUp = setInterval(MarqueeUp, pic_speed)
                    marquee.onmouseover = function() { clearInterval(MarUp) }
                    marquee.onmouseout = function() { MarUp = setInterval(MarqueeUp, pic_speed) }
                }
        </script>

注意：

1.垂直滚动时一定要设置父层高的，本例为marquee。

2.js代码位置必须在html代码位置下方。

 

offsetTop：当前对象到其父层顶部的距离。

offsetLeft：当前对象到其父层左边的距离。

2者不可以赋值。

offsetWidth：当前对象的宽度。
offsetHeight ：当前对象的高度。

与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值

scrollLeft：对象的最左边到对象在当前窗口显示的范围内的左边的距离。

即是在出现了横向滚动条的情况下，滚动条拉动的距离。
scrollTop：对象的最顶部到对象在当前窗口显示的范围内的顶边的距离。

即是在出现了纵向滚动条的情况下，滚动条拉动的距离。