刘华世的官方博客

php广告图片循环播放 幻灯片效果 

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8">
    <title>Image play</title>
    <style>
        body{
            width:430px;
            margin:20px auto;
        }
        p.now{
            display:block;
            width:400px;
            height:200px;
            overflow:hidden;
            border:1px solid #ccc;
        }
        li.now{
            color:#ccc;
        }
        li{
            list-style:none;
            float:left;
            padding:0 10px;
            margin-bottom:5px;
            border:1px solid #ccc;
            background:#eee;
        }
        #fd{
            list-style:none;
            float:left;
            padding:0 10px;
            border:1px solid #ccc;
            margin:0 auto;
            background:#eee;
        }
        img{
            width:400px;
            height:200px;
            padding:1px;
            /*padding-top:18px;*/
        }
    </style>
</head>
<body>
<div id="fd">
    <p class="now"><img src="./images/pic1.jpg"></p>
    <p style="display:none;"><img src="./images/pic2.jpg"></p>
    <p style="display:none;"><img src="./images/pic3.jpg"></p>
    <p style="display:none;"><img src="./images/pic4.jpg"></p>
    <ul>
        <li class="now">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script>
    var tags=$("fd").getElementsByTagName("li"); // 获取切换按钮节点
    var cats=$("fd").getElementsByTagName("p"); // 获取切换内容节点
    var current; // 高置当前帧的变量宣容器
    var timer=2000; // 设置2秒循环一次
    function disAll(){
        for(var i=0; i<tags.length; i++){
            tags[i].className="";
            cats[i].className="";
            cats[i].style.display="none";
        }
    }
    function setNow(){
        for(var i=0; i<tags.length; i++){
            if(tags[i].className=="now"){
                current=i;
            }
        }
    }
    for(var j=0; j<tags.length; j++){
        tags[j].onmouseover=function(){
            clearInterval(h);
            disAll();
            this.className="now";
            setNow();
            cats[current].style.display="block";
            cats[current].className="now";
        }
        tags[j].onmouseout=function(){
            setNow();
            h=setInterval("goNext()", 3000);
        }
    }
    function goNext(){
        setNow();
        current+=1;
        if(current>=parseInt(tags.length)){
            current=0;
            disAll();
            cats[0].style.display="block";
            tags[0].className="now";
            cats[0].className="now";
        }else{
            disAll();
            cats[current].style.display="block";
            cats[current].className="now";
            tags[current].className="now";
        }
    }
    var h=setInterval("goNext()", timer);
    function $(obj){
        return document.getElementById(obj);
    }
</script>
</body>
</html>

posted @ 2015-09-12 11:31  刘华世的博客  阅读(1319)  评论(0)  编辑  收藏  举报
刘华世的官方博客