zoukankan      html  css  js  c++  java
  • 图片的无缝滚动效果

    代码:

    ps:图片200*200;

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>图片的无缝滚动效果</title>    
     6     <!-- 标题图标 -->
     7     <link rel="shortcut icon" type="image/x-icon" href="1.png">
     8     <style>
     9         body,
    10         div,
    11         img {
    12             margin: 0;
    13             padding: 0;
    14         }
    15         .outer {
    16             overflow: hidden;
    17             width: 200px;
    18             height: 200px;
    19             margin: 50px auto;
    20         }
    21         #inner {
    22             width: 2000px;
    23             height: 200px;
    24         }
    25         #inner img {
    26             float: left;
    27             width: 200px;
    28             height: 200px;
    29         }
    30     </style>
    31 </head>
    32 <body>
    33     <div class="outer" id="outer">
    34         <div id="inner">
    35             <a href="http:www.baidu.com"><img src="1.png" alt="1"></a>
    36             <img src="2.png" alt="2">
    37             <img src="3.png" alt="3">
    38             <img src="4.png" alt="4">
    39             <img src="5.png" alt="5">
    40         </div>
    41     </div>
    42     <script>
    43         var outer = document.getElementById('outer');
    44         var inner = document.getElementById('inner');
    45         inner.innerHTML += inner.innerHTML;
    46         function autoscroll(){
    47             outer.scrollLeft++;
    48             if(outer.scrollLeft == inner.offsetWidth/2){
    49                 outer.scrollLeft = 0;                
    50             }
    51         }
    52         // 经过17毫秒后,执行一次autoscroll函数
    53         // setInterval(autoscroll,17);
    54         // 每经过17毫秒后,执行一次autoscroll函数
    55         setInterval(autoscroll,17);
    56     </script>
    57 </body>
    58 </html>
  • 相关阅读:
    JS高级——eval
    JS高级——Object.prototype成员
    JS高级——原型链
    JS高级——逻辑中断
    移动web——bootstrap媒体对象
    移动web——bootstrap如何修改原组件
    移动web——bootstrap响应式轮播图
    Leetcode题解
    位运算实现四则运算(C++实现)
    扫码登陆原理
  • 原文地址:https://www.cnblogs.com/kewenxin/p/5921028.html
Copyright © 2011-2022 走看看