首页 > 代码库 > js图片轮换经典小例子

js图片轮换经典小例子

2024-07-02 09:25:36   216人阅读

使用js脚本实现图片轮换、图片轮播的小例子，纯js实现的，感觉不错，收藏下。

例子，js脚本实现图片轮换代码。

<script type="text/javascript">
var NowFrame = 1; //初始化显示第几张
var MaxFrame = 3; //最大显示几张
function show() {
for (var i = 1; i < (MaxFrame + 1); i++) {
if (i == NowFrame)
document.getElementById(‘div‘ + NowFrame).style.display = ‘‘; //当前图片显示
else
document.getElementById(‘div‘ + i).style.display = ‘none‘; //其他的图片隐藏
}
{ www.jbxue.com
if (NowFrame == MaxFrame) //定义下一张显示的图片
NowFrame = 1;
else
NowFrame++;
}
theTimer = setTimeout(‘show()‘, 1000); //设置定时器，显示下一张显示的图片
}
</script>
</head>
<body onl oad="show();">
<form id="form1" runat="server">
<div id="tupianlunhuan">
<img  src="http://www.mamicode.com/images/5.png" style="display: none;" id="div1" border="0"/>
<img  src="http://www.mamicode.com/images/1.jpg" style="display: none;" id="div2" border="0"/>
<img  src="http://www.mamicode.com/images/3.png" style="display: none;" id="div3" border="0"/>
</div> 
</form>
</body>

您可能感兴趣的文章：

  • js图片轮换效果的例子
  • JS图片自动轮换效果实例代码
  • jquery animate实现图片轮换
  • javascript+xml简单图片轮换(只支持IE)的实现代码
  • 图片轮换效果(点击按钮停止执行)的js代码
  • jquery 图片幻灯轮换效果的代码一例


联系
我们