zoukankan      html  css  js  c++  java
  • 图片滚动百分百宽度

    <html>
    <head>
    <title></title>
    <style>
    *{
    margin:0;padding:0;
    }
    #show{
    100%;
    height:400px;
    overflow:hidden;
    }
    #content{
    height:400px;
    }
    #content p{
    height:400px;
    margin:0;
    padding:0;
    float:left;
    position:relative;
    overflow:hidden;
    }
    #content p img{
    3000px;
    height:400px;
    position:absolute;
    left:50%;
    margin-left:-1500px;
    }
    </style>
    </head>
    <body>
    <div id="show">
    <div id="content"><p><img src="c1.jpg"></p>
    <p><img src="c2.jpg"></p>
    <p><img src="c3.jpg"></p></div>
    </div>
    <script type="text/javascript">
    var sw=window.screen.width;
    var con=document.getElementById("content")
    con.style.width=sw*3+"px";
    for(var i=0;i<con.children.length;i++){
    con.children[i].style.width=sw+"px";
    }

    function mq(){
    document.getElementById("show").scrollLeft+=40;
    if(document.getElementById("show").scrollLeft>=sw){
    var c=document.getElementById("content");
    c.appendChild(c.children[0]);
    document.getElementById("show").scrollLeft=0;
    clearInterval(i);
    setTimeout(ss, 1000);
    }
    }
    function ss(){
    i=window.setInterval("mq()", 100);
    }
    setTimeout(ss, 1000);
    </script>
    </body>
    </html>
  • 相关阅读:
    webkit特有的css属性
    js apply/call/caller/callee/bind使用方法与区别分析
    canvas
    seajs
    div 等高
    js常用函数
    浮动元素水平居中
    JavaScript的9个陷阱及评点
    Touch Event
    js跨域问题
  • 原文地址:https://www.cnblogs.com/bingjiebeibei/p/9355371.html
Copyright © 2011-2022 走看看