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

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{
    margin: 0;
    padding: 0;
    list-style: none;
    }
    #box{
    position: relative;
    1100px;
    height: 220px;
    overflow: hidden;
    border: 1px solid black;
    margin: 50px auto;
    }
    #box ul{
    position: absolute;
    left: 0;
    }
    #box ul li{
    200px;
    height: 200px;
    padding: 10px;
    float: left;
    }
    </style>
    <script>
    window.onload = function(){
    var oBox = document.getElementById('box');
    var oUl = document.getElementById('ul');
    var aLi = oUl.children;
    oUl.innerHTML += oUl.innerHTML;
    oUl.style.width = aLi[0].offsetWidth*aLi.length + 'px';
    setInterval(function(){
    var l = oUl.offsetLeft - 5;
    if(l <= -oUl.offsetWidth/2){
    l = 0;
    }
    oUl.style.left = l + 'px';
    },30)
    }
    </script>
    </head>
    <body>
    <div id="box">
    <ul id="ul">
    <li><img src="image/1.jpg"width="200px" height="200px"></li>
    <li><img src="image/2.jpg"width="200px" height="200px"></li>
    <li><img src="image/3.jpg"width="200px" height="200px"></li>
    <li><img src="image/4.jpg"width="200px" height="200px"></li>
    <li><img src="image/5.jpg"width="200px" height="200px"></li>
    </ul>
    </div>
    </body>
    </html>
     
  • 相关阅读:

    二分查找法
    LeetCode-Two Sum III
    LeetCode-Add and Search Word
    LeetCode-Longest Substring with At Least K Repeating Characters
    LeetCode-Rearrange String k Distance Apart
    LeetCode-Game of Life
    LeetCode-Walls and Gates
    LeetCode-Water and Jug Problem
    LeetCode-Inorder Successor in BST
  • 原文地址:https://www.cnblogs.com/wang1593840378/p/6041043.html
Copyright © 2011-2022 走看看