首页 > 代码库 > 大图轮播

大图轮播

2024-08-27 02:25:19   218人阅读

整体思路；

  设一个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>

 

大图轮播


联系
我们