欢迎光临一流素材网,免积分免费素材下载!
AD
当前位置:首页 > JS代码 > 其它代码

js实现网页多个div定时轮流显示的代码

所属栏目:其它代码更新时间:2014-03-29原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明


允许网页中的多个DIV按设定好的时间轮流显示,某些时候非常有用。

完整代码:

<style type="text/css">
#con{ border:5px solid #ccc;padding:10px;font-size:30px;}
.a{ border:2px solid #ccc;background-color:#eee;}
</style>
<div id="con"><!--外层容器-->
    <div class="a">111111</div>
    <div class="a" style="display:none">222222</div>
    <div class="a" style="display:none">333333</div>
    <div class="a" style="display:none">444444</div>
    <div class="a" style="display:none">555555</div>
    <div class="a" style="display:none">666666</div>
    <div class="a" style="display:none">777777</div>
</div>
<script type="text/javascript">
<!--
function G(e){return document.getElementById(e);}
function myPlayer(con, child, speed){
    var ts = G(con).getElementsByTagName(child),//获取容器内需要轮流显示的子元素:这里是 div
        timer,k=0;
        var timer = setInterval(function(){//定义时间控制器
            for(var m=0;m<ts.length;m++){ts[m].style.display="none";}//先隐藏全部,此处效率降低,可以考虑不用循环
            ts[k].style.display="";//显示需要显示的
            if(k>ts.length-2){
               k=0;
            }else{
               k++;
            }
        },speed);
}
myPlayer("con","div",1000);//调用,参数一外层元素ID,参数二循环元素名称,间隔时间:秒数的1000倍
-->
</script>

1000就是1秒,60000就是1分钟

具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1JS动态五星评分插件代码

2淘宝商品jQuery列表多条件查询特效代码

3兼容所有浏览器的设为首页收藏本站js代码

4JS实现文字替换成图片或者其它内容

5js实现网页多个div定时轮流显示的代码

6IE6旧版浏览器提示升级代码模板下载

7SimplePager-非常简洁优秀的 jQuery 分页插件-同页面可重复使用

8后台登录jquery网页全屏背景图片自动切换代码

9百度404页面JS倒计时返回页面代码

10jQuery公司大事记、历程时间轴专用代码

最新更新的

1JS点击加大/减小字号的代码

2jQuery点击展开与收缩查看更多效果代码

3JqueryPagination分页插件

4一款漂亮方便调用的jQuery前端分页

5JS返回上一页/返回上一页并刷新

6百度404页面JS倒计时返回页面代码

7JS赋值给指定元素的父级元素

8JS实现301跳转的JS代码

9JS拆分文本再组合

10Jquery点击按钮给class设置样式的JS代码