zoukankan      html  css  js  c++  java
  • JS 无缝滚动

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <style type="text/css">
     7             #wrap{
     8                 width: 300px;
     9                 height: 300px;
    10                 margin: 20px auto 0;
    11                 overflow: hidden;
    12                 position: relative;
    13                 /*border: 10px solid gray;*/
    14             }
    15             #sroll{
    16                 height: 300px;
    17                 width: 9999px;
    18                 position: absolute;
    19             }
    20             #sroll img{
    21                 float: left;
    22                 width: 300px;
    23                 height: 300px;
    24             }
    25         </style>
    26     </head>
    27     <body>
    28         <div id="wrap">
    29             <div id="sroll">
    30                 <img src="img/1.jpg" alt="" />
    31                 <img src="img/2.jpg" alt="" />
    32                 <img src="img/3.jpg" alt="" />
    33                 <img src="img/4.jpg" alt="" />
    34             </div>
    35         </div>
    36     </body>
    37     
    38     <script type="text/javascript">
    39         // 获取 wrap
    40         var wrapDiv = document.getElementById("wrap");
    41         // 获取 sroll
    42         var srollDiv = document.getElementById("sroll");
    43         // 获取所有 img 标签
    44         var imgArray = srollDiv.getElementsByTagName("img");
    45         var inset = 0;
    46         // 求取 wrapDiv 的可视宽度
    47         var width = wrapDiv.offsetWidth; 
    48         
    49         srollDiv.innerHTML += srollDiv.innerHTML;    
    50         
    51         console.log(srollDiv.innerHTML);
    52         setInterval(function(){
    53             inset -= 5;
    54             if(inset <= -width * (imgArray.length / 2)){
    55                 inset = 0;
    56             }
    57             srollDiv.style.left = inset + "px";
    58         },30);
    59         
    60         
    61     </script>
    62         
    63 </html>
  • 相关阅读:
    wampserver服务器离线,无法访问此网站 找不到 项目 的服务器 DNS 地址。
    node.js(一)介绍与安装
    js全局函數
    类和对象的定义
    iframe框架学习
    while和do-while的区别
    html5视频音频
    列表
    html表格的学习
    云课堂数组1
  • 原文地址:https://www.cnblogs.com/PowellZhao/p/5627159.html
Copyright © 2011-2022 走看看