javascript-图片横向无缝隙滚动(可在服务器运行)

2022-10-19 18:37:34

前两次弄'图片横向滚动'javascript,在本地上运行得很美,可是一上到我们学校后台的服务器,就有很多问题,这个算是行的了.

css代码:

 <style type="text/css">

         .scroll_div {

             width: 1000px;

             height: 250px;

             margin: 0 auto;

             overflow: hidden;

             white-space: nowrap;

             background: #ffffff;

         }

         .scroll_div img {

             width: 250px;

             height: 250px;

             border:;

             border: 1px #efefef solid;

         }

         #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li {

             display: inline;

         }

javascript代码:

 <script language="javascript">

         function scroll_img_left() {

             var speed = 20

             var scroll_begin = document.getElementById("scroll_begin");

             var scroll_end = document.getElementById("scroll_end");

             var scroll_div = document.getElementById("scroll_div");

             scroll_end.innerHTML = scroll_begin.innerHTML

             function Marquee() {

                 if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)

                     scroll_div.scrollLeft -= scroll_begin.offsetWidth

                 else

                     scroll_div.scrollLeft++

             }

             var MyMar = setInterval(Marquee, speed)

             scroll_div.onmouseover = function () {

                 clearInterval(MyMar)

             }

             scroll_div.onmouseout = function () {

                 MyMar = setInterval(Marquee, speed)

             }

         }

     </script>

html代码:

<div class="">

        <div id="scroll_div" class="scroll_div">

            <div id="scroll_begin">

                <ul>

                    <li><a href=""><img src="data:image/11.jpg"/></a></li>

                    <li><a href=""><img src="data:image/222.jpg"/></a></li>

                    <li><a href=""><img src="data:image/444.jpg"/></a></li>

                    <li><a href=""><img src="data:image/555.jpg"/></a></li>

                </ul>

            </div>

            <div id="scroll_end"></div>

        </div>

    </div>

完整html页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

    <title>javascript-图片横向无缝隙滚动(可在服务器运行)</title>

    <style type="text/css">

        .scroll_div {

            width: 1000px;

            height: 250px;

            margin: 0 auto;

            overflow: hidden;

            white-space: nowrap;

            background: #ffffff;

        }

        .scroll_div img {

            width: 250px;

            height: 250px;

            border: 0;

            border: 1px #efefef solid;

        }

        #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li {

            display: inline;

        }

    </style>

    <script language="javascript">

        function scroll_img_left() {

            var speed = 20

            var scroll_begin = document.getElementById("scroll_begin");

            var scroll_end = document.getElementById("scroll_end");

            var scroll_div = document.getElementById("scroll_div");

            scroll_end.innerHTML = scroll_begin.innerHTML

            function Marquee() {

                if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)

                    scroll_div.scrollLeft -= scroll_begin.offsetWidth

                else

                    scroll_div.scrollLeft++

            }

            var MyMar = setInterval(Marquee, speed)

            scroll_div.onmouseover = function () {

                clearInterval(MyMar)

            }

            scroll_div.onmouseout = function () {

                MyMar = setInterval(Marquee, speed)

            }

        }

    </script>

</head>

<body onload="scroll_img_left()">

<div style="text-align:center">

    <div class="">

        <div id="scroll_div" class="scroll_div">

            <div id="scroll_begin">

                <ul>

                    <li><a href=""><img src="data:image/11.jpg"/></a></li>

                    <li><a href=""><img src="data:image/222.jpg"/></a></li>

                    <li><a href=""><img src="data:image/444.jpg"/></a></li>

                    <li><a href=""><img src="data:image/555.jpg"/></a></li>

                </ul>

            </div>

            <div id="scroll_end"></div>

        </div>

    </div>

</div>

<!--//向左滚动代码结束-->

</body>

</html></td>

</tr>

</table>

码农公寓

相关文章