快捷导航

请问,轮播图卡在这里了,给四个图片添加style.display="block"不行

html:











首页

点击看看

会自动的

我的网站
































css:
*{padding:0;
margin:0;}


body{font-family:Microsoft YaHei;
}
a:link,a:visited{text-decoration: none}


.main{width:1000px
        height:500px;
        overflow: hidden;
       
}


.nav{width: 1000px;
        height: 50px;
        background: #FFF;
        border:dashed #666;
        border-bottom: none;
}
       


.nav-row{
        font-size: 22px;
        margin:auto auto;
        width: 250px;
        height: 50px;
        text-align: center;
        float:left;
        background:#666;
        line-height:50px;
}


.banner{width: 1000px;
                height: 450px;
                overflow: hidden;
                position: relative;
}


.banner-slide{width: 1000px;
                height: 450px;
                position: absolute;
                background-repeat: no-repeat;
                display:none
}


.slide-active{display:block;}


.slide1{
        background-image:url("../img/1.jpg")
}
.slide2{
        background-image:url("../img/3.jpg")
}
.slide3{
        background-image:url("../img/4.jpg")
}
.slide4{
        background-image:url("../img/5.jpg")
}


javascript:
//封装一个代替getElementById()的方法
function byId(id){
        return typeof(id)==="string"?document.getElementById(id):id;
}


var index=0,
        timer=null,
        pics=byId("banner").getElementsByTagName("div"),
        len=pics.length;


function slideImg(){
        var main=byId("main")
//滑过清楚定时器,离开后继续
        main.onmouseover = function(){
//滑过清除定时器
        }
        main.onmouseout = function(){
//鼠标离开后定时器开始
                timer = setInterval(function(){
                        index++;
                        if(index>=len){index=0
                        }
                        //切换图片
                        changeImg();
                },1000)
                }


        }
}
//切换图片
function changeImg(){


        pics[index].style.display = 'block';
}
}




slideImg();

免责声明:本内容仅代表回答者见解不代表本站观点,请谨慎对待。

版权声明:作者保留权利,不代表本站立场。

回复

使用道具 举报

可能感兴趣的问答

发新帖
  • 微信访问
  • 手机APP