正在读取中...

正在读取中...

当前位置:首页 > JS代码 > 其它代码

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

所属栏目:其它代码 时间:2014-03-29 来源:网络 作者:不详 次围观 次下载
js实现网页多个div定时轮流显示的代码
兼容:
查看演示
本地下载
收藏

正在读取中...

允许网页中的多个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分钟

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

请站长喝杯咖啡?

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

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

正在读取中...

猜你喜欢

共有 条评论

给个评价吧

验证码: