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

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
    *{padding: 0;margin: 0}
    #div1{
    height: 200px;
    800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    position: relative;
    background-color: red;
    overflow: hidden;
    }
    #div1 ul{
    position: absolute;
    left: 0;
    top: 0;
    }
    #div1 ul li{
    float: left;
    list-style: none;
    }
    #div1 ul img{
    height: 200px;
    200px;
    }
    </style>
    </head>
    <body>
    <a href="#">LEFT</a>
    <a href="#">RIGHT</a>
    <div id="div1">
    <ul>
    <li><img src="img/1.jpg"></li>
    <li><img src="img/2.jpg"></li>
    <li><img src="img/3.jpg"></li>
    <li><img src="img/4.jpg"></li>
    </ul>
    </div>
    <script type="text/javascript">
    window.onload=function () {
    var oDiv=document.getElementById('div1');
    var oUl=oDiv.getElementsByTagName('ul')[0];
    var aLi=oUl.getElementsByTagName('li');
    var speed=-2;

    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

    function move()
    {
    if(oUl.offsetLeft<-oUl.offsetWidth/2)
    {
    oUl.style.left='0';
    }
    if(oUl.offsetLeft>0)
    {
    oUl.style.left=-oUl.offsetWidth/2+'px';
    }
    oUl.style.left=oUl.offsetLeft+speed+'px';
    };
    var timer=setInterval(move, 30);
    oDiv.onmouseover=function()
    {
    clearInterval(timer);
    };
    oDiv.onmouseout=function()
    {
    timer=setInterval(move, 30);
    };
    document.getElementsByTagName('a')[0].onclick=function()
    {
    speed=-2;
    };
    document.getElementsByTagName('a')[1].onclick=function()
    {
    speed=2;
    };
    };
    </script>
    </body>
    </html>

  • 相关阅读:
    Intent跳转到系统应用中的拨号界面、联系人界面、短信界面及其他
    android intent 跳转
    Android Intent 使用整理
    Android实现界面跳转
    android获取手机信息大全
    Android中实现Gallery 点击放大
    Android之TextView 详细字典
    Android发展简介
    如何成为Android高手
    系统测试阶段:
  • 原文地址:https://www.cnblogs.com/huixinyudeboke/p/5267938.html
Copyright © 2011-2022 走看看