优游旧版用户登录

注册 | 登录 | 网址 欢迎访问八百站长

图片不间断滚动DIV+CSS+JS代码

2015/8/9 11:12:51 作者:站长日记 来源:八百站长 优游旧版用户登录:2795次

图片不间断向左滚动(DIV+CSS+JS代码)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>图片不间断滚动</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 800px;
        margin: 20px auto 0;
      }
      .box h2 {
        width: 800px;
        margin: 0 auto;
      }
      #s_left {
        width: 800px;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        border: 1px solid #ccc;
      }
      #s_left img {
        width: 240px;
        height: 180px;
        border: 0;
        margin: 10px 5px;
      }
      #s_left_1,
      #s_left_2,
      #s_left_1 ul,
      #s_left_2 ul,
      #s_left_1 ul li,
      #s_left_2 ul li {
        display: inline;
        list-style-type: none;
      }
    </style>
    <script type="text/javascript">
      function ScrollLeft() {
        var speed = 20;
        var s_left = document.getElementById("s_left");
        var s_left_1 = document.getElementById("s_left_1");
        var s_left_2 = document.getElementById("s_left_2");
        s_left_2.innerHTML = s_left_1.innerHTML;
        function Marquee() {
          if (s_left_2.offsetWidth - s_left.scrollLeft <= 0) {
            s_left.scrollLeft -= s_left_1.offsetWidth;
          } else {
            s_left.scrollLeft++;
          }
        }
        var MyMar = setInterval(Marquee, speed);
        s_left.onmouseover = function() { clearInterval(MyMar); }
        s_left.onmouseout = function() { MyMar = setInterval(Marquee, speed); }
      }
    </script>
  </head>
  <body>
    <div class="box">
      <h2>图片不间断向左滚动DIV+CSS+JS代码</h2>
      <div id="s_left">
        <div id="s_left_1">
          <ul>
            <li><a href="#"><img src="images/01.jpg"></a></li>
            <li><a href="#"><img src="images/02.jpg"></a></li>
            <li><a href="#"><img src="images/03.jpg"></a></li>
            <li><a href="#"><img src="images/04.jpg"></a></li>
            <li><a href="#"><img src="images/05.jpg"></a></li>
            <li><a href="#"><img src="images/06.jpg"></a></li>
          </ul>
        </div>
        <div id="s_left_2"></div>
        <script>ScrollLeft();</script>
      </div>
    </div>
  </body>
</html>

 

图片不间断向右滚动(DIV+CSS+JS代码)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>图片不间断滚动</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 800px;
        margin: 20px auto 0;
      }
      .box h2 {
        width: 800px;
        margin: 0 auto;
      }
      #s_right {
        width: 800px;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        border: 1px solid #ccc;
      }
      #s_right img {
        width: 240px;
        height: 180px;
        border: 0;
        margin: 10px 5px;
      }
      #s_right_1,
      #s_right_2,
      #s_right_1 ul,
      #s_right_2 ul,
      #s_right_1 ul li,
      #s_right_2 ul li {
        display: inline;
        list-style-type: none;
      }
    </style>
    <script type="text/javascript">
      function ScrollRight() {
        var speed = 20;
        var s_right = document.getElementById("s_right");
        var s_right_1 = document.getElementById("s_right_1");
        var s_right_2 = document.getElementById("s_right_2");
        s_right_2.innerHTML = s_right_1.innerHTML;
        function Marquee() {
          if (s_right.scrollLeft <= 0) {
            s_right.scrollLeft += s_right_1.offsetWidth;
          } else {
            s_right.scrollLeft--;
          }
        }
        var MyMar = setInterval(Marquee, speed);
        s_right.onmouseover = function() { clearInterval(MyMar); }
        s_right.onmouseout = function() { MyMar = setInterval(Marquee, speed); }
      }
    </script>
  </head>
  <body>
    <div class="box">
      <h2>图片不间断向右滚动DIV+CSS+JS代码</h2>
      <div id="s_right">
        <div id="s_right_1">
          <ul>
            <li><a href="#"><img src="images/01.jpg"></a></li>
            <li><a href="#"><img src="images/02.jpg"></a></li>
            <li><a href="#"><img src="images/03.jpg"></a></li>
            <li><a href="#"><img src="images/04.jpg"></a></li>
            <li><a href="#"><img src="images/05.jpg"></a></li>
            <li><a href="#"><img src="images/06.jpg"></a></li>
          </ul>
        </div>
        <div id="s_right_2"></div>
        <script>ScrollRight();</script>
      </div>
    </div>
  </body>
</html>

 

图片不间断向上滚动(DIV+CSS+JS代码)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>图片不间断滚动</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 420px;
        margin: 20px auto 0;
      }
      .box h2 {
        width: 420px;
        margin: 0 auto;
      }
      #s_up {
        width: 260px;
        height: 480px;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        border: 1px solid #ccc;
      }
      #s_up img {
        width: 240px;
        height: 180px;
        border: 0;
        margin: 5px 10px;
      }
      #s_up_1,
      #s_up_2,
      #s_up_1 ul,
      #s_up_2 ul,
      #s_up_1 ul li,
      #s_up_2 ul li {
        list-style-type: none;
      }
    </style>
    <script type="text/javascript">
      function ScrollUp() {
        var speed = 20;
        var s_up = document.getElementById("s_up");
        var s_up_1 = document.getElementById("s_up_1");
        var s_up_2 = document.getElementById("s_up_2");
        s_up_2.innerHTML = s_up_1.innerHTML;
        function Marquee() {
          if (s_up_2.offsetTop - s_up.scrollTop <= 0) {
            s_up.scrollTop -= s_up_1.offsetHeight;
          } else {
            s_up.scrollTop++;
          }
        }
        var MyMar = setInterval(Marquee, speed);
        s_up.onmouseover = function() { clearInterval(MyMar); }
        s_up.onmouseout = function() { MyMar = setInterval(Marquee, speed); }
      }
    </script>
  </head>
  <body>
    <div class="box">
      <h2>图片不间断向上滚动DIV+CSS+JS代码</h2>
      <div id="s_up">
        <div id="s_up_1">
          <ul>
            <li><a href="#"><img src="images/01.jpg"></a></li>
            <li><a href="#"><img src="images/02.jpg"></a></li>
            <li><a href="#"><img src="images/03.jpg"></a></li>
            <li><a href="#"><img src="images/04.jpg"></a></li>
            <li><a href="#"><img src="images/05.jpg"></a></li>
            <li><a href="#"><img src="images/06.jpg"></a></li>
          </ul>
        </div>
        <div id="s_up_2"></div>
        <script>ScrollUp();</script>
      </div>
    </div>
  </body>
</html>

图片不间断向下滚动(DIV+CSS+JS代码)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>图片不间断滚动</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 420px;
        margin: 20px auto 0;
      }
      .box h2 {
        width: 420px;
        margin: 0 auto;
      }
      #s_down {
        width: 260px;
        height: 480px;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        border: 1px solid #ccc;
      }
      #s_down img {
        width: 240px;
        height: 180px;
        border: 0;
        margin: 5px 10px;
      }
      #s_down_1,
      #s_down_2,
      #s_down_1 ul,
      #s_down_2 ul,
      #s_down_1 ul li,
      #s_down_2 ul li {
        list-style-type: none;
      }
    </style>
    <script type="text/javascript">
      function ScrollDown() {
        var speed = 20;
        var s_down = document.getElementById("s_down");
        var s_down_1 = document.getElementById("s_down_1");
        var s_down_2 = document.getElementById("s_down_2");
        s_down_2.innerHTML = s_down_1.innerHTML;
        function Marquee() {
          if (s_down_1.offsetTop - s_down.scrollTop >= 0) {
            s_down.scrollTop += s_down_2.offsetHeight;
          } else {
            s_down.scrollTop--;
          }
        }
        var MyMar = setInterval(Marquee, speed);
        s_down.onmouseover = function() { clearInterval(MyMar); }
        s_down.onmouseout = function() { MyMar = setInterval(Marquee, speed); }
      }
    </script>
  </head>
  <body>
    <div class="box">
      <h2>图片不间断向下滚动DIV+CSS+JS代码</h2>
      <div id="s_down">
        <div id="s_down_1">
          <ul>
            <li><a href="#"><img src="images/01.jpg"></a></li>
            <li><a href="#"><img src="images/02.jpg"></a></li>
            <li><a href="#"><img src="images/03.jpg"></a></li>
            <li><a href="#"><img src="images/04.jpg"></a></li>
            <li><a href="#"><img src="images/05.jpg"></a></li>
            <li><a href="#"><img src="images/06.jpg"></a></li>
          </ul>
        </div>
        <div id="s_down_2"></div>
        <script>ScrollDown();</script>
      </div>
    </div>
  </body>
</html>

 

上一篇: 没有了 下一篇: Echarts饼状图属性设置大全