码迷,mamicode.com
首页 > 其他好文 > 详细

大图轮播

时间:2016-12-14 13:29:37      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:大图轮播   overflow   height   pad   osi   ati   轮播   element   插入   

整体思路;

  设一个div,设置宽与高。嵌入一个表格,确定好位置后,插入图片,超出部分隐藏。

  在js中定义一个变量接受left的值,并赋值为0px,即初始值

  设置一个函数

function  a(){在值中减掉一张图片的宽度}

  设置一个延时时间

<style>
#tu{ width:400px; height:300px; position:relative; margin:50px auto; overflow:hidden; border:1px solid #000;}
#sk{ position:relative; left:0px; top:0px; transition:0.5s;}
</style>
</head>

<body>
<div id="tu" onclick="Change()">
<table id="sk" cellpadding="0" cellspacing="0">
<tr height="300">
<td><img src="" height="300" /></td>
<td><img src="图片" /></td>
<td><img src="图片" /></td>
<td><img src="图片" height="300" /></td>
</tr>
</table>

</div>

</body>
</html>
<script>
document.getElementById("sk").style.top="0px";
function Change()
{
    var sk = parseInt(document.getElementById("sk").style.top);
    
    if(sk>-1200)
    {
    document.getElementById("sk").style.top=(sk-400)+"px";
    }
    else{
          document.getElementById("sk").style.top="0px"
        }
        window.setTimeout("Change()",1700)
}
window.setTimeout("Change()",1700)
</script>

 

大图轮播

标签:大图轮播   overflow   height   pad   osi   ati   轮播   element   插入   

原文地址:http://www.cnblogs.com/xuan584521/p/6178706.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!