简单的自动轮播制作

首先要实现图片轮播，就要设置一个包含它的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 @   梦深深处  阅读(392)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
点击右上角即可分享
微信分享提示
SQL AI 助手