简单的自动轮播制作

首先要实现图片轮播，就要设置一个包含它的div，然后我们把图片放在一个表格中，这样比较好看。body里边基本就放这几样东西，很简单。

<body>
<div id="datu">
<table cellpadding="0" cellspacing="0" id="aa">
<tr height="500">
<td><img src="1.jpg" width="1360" height="500px"/></td>
<td><img src="2.jpg" width="1360" height="500px" /></td>
<td><img src="3.jpg" width="1360" height="500px" /></td>
<td><img src="4.jpg" width="1360" height="500px" /></td>
<td><img src="5.jpg" width="1360" height="500px" /></td>
</tr>
</table>
</div>
</body>

接下来就是用CSS样式表对body里面的内容规定样式。

<style>
*{
    margin:0px;
    padding:0px;}
#datu
{
    width:1360px;
    height:500px;
    border: 1px solid #000;
    overflow:hidden;
    position:relative;
}
#aa{
    position:relative;
    top:0px;
    left:0px;
    transition:0.5s;}
</style>

最后也最关键的就是图片自动播放的js方法，其实就是摘取各个ID给它们赋值，setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method。

<script>
document.getElementById("aa").style.left="0px";
function shao()
{
var aa = parseInt(document.getElementById("aa").style.left);
if(aa>-5400)
{
    document.getElementById("aa").style.left=(aa-1360)+"px"
    
}
else
{
    document.getElementById("aa").style.left="0px"
}bb = window.setTimeout("shao()",1000);
}bb = window.setTimeout("shao()",1000);
</script>

 

posted @ 2017-04-05 20:16  梦深深处  阅读(387)  评论(0)  编辑  收藏  举报