教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 js图片轮换效果的例子

js图片轮换效果的例子

发布时间:2015-07-30   编辑:jiaochengji.com
如何用js实现图片轮换效果,说来也很简单,借助settimeout函数实现图片自动轮换效果,有需要的朋友参考下。

例子,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'; //其他的图片隐藏
    }
    {
if (NowFrame == MaxFrame) //定义下一张显示的图片
NowFrame = 1;
        else
NowFrame++;
    }
    theTimer = setTimeout('show()', 1000); //设置定时器,显示下一张显示的图片
}
</script>
</head>
<body  onload="show();">
    <form id="form1" runat="server">
        <div id="tupianlunhuan">
<img alt="" src="../images/5.png" style="display: none;" id="div1" border="0"/>

<img alt="" src="../images/1.jpg" style="display: none;" id="div2" border="0"/>
<img alt="" src="../images/3.png" style="display: none;" id="div3" border="0"/>
</div>       
</form>
</body>

以上就是js图片轮换效果的实现代码,大家可以找些图片自行测试下,看看效果如何?!

您可能感兴趣的文章:
js图片轮换效果的例子
JS图片自动轮换效果实例代码
js图片轮换代码 js图片轮播简单示例
图片轮换效果(点击按钮停止执行)的js代码
JQuery 图片滚动轮播示例代码
CSS实现轮播图广告效果
Js 图片滚动的实现方法
jQuery 幻灯片插件(带缩略图功能)
js 鼠标滚轮改变图片大小的小例子
jquery 图片轮播代码示例

关键词: 图片轮换  自动轮换   
[关闭]
~ ~