老师,为什么我的轮播图效果出不来呢
老师,您好,我想咨询一下为什么我的js动态加了以后,轮播图效果出来呢?我好像也大概发现了问题,就是4张图片我分别设置了4个div,但是这4个div没有重叠,我不知道如何让这4个div重叠在一起,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lunbopicture</title>
<link rel="stylesheet" type="text/css" href="css/lunbo.css">
</head>
<body>
<div class="zong">
<div class="shang" id="biaoti">
<div class="title">首页</div>
<div class="title">点击看看</div>
<div class="title">会自动的</div>
<div class="title">我的网站</div>
</div>
<div class="lunbo1" id="banner">
<div class="tu1 banner"></div>
<div class="tu2 banner"></div>
<div class="tu3 banner"></div>
<div class="tu4 banner"></div>
</div>
</div>
<script type="text/javascript" src="js/lunbo.js"> </script>
</body>
</html>
*{
margin:0px;
padding: 0px;
}
.zong{
margin: 0 auto;
width: 1200px;
height: 542px;
}
.shang{
width:1200px;
height:42px;
overflow: hidden;
}
.title{
width: 300px;
height: 42px;
float: left;
text-align: center;
margin:0 auto;
line-height: 42px;
font-family: "Microsoft YaHei";
font-size: 22px;
}
.title:hover{
background-color: #FFCC00;
cursor: pointer;
}
.lunbo1{
width: 1200px;
height: 500px;
overflow: hidden;
background-repeat: no-repeat;
}
.lunbo1 .banner{
background-repeat: no-repeat;
width: 1200px;
height: 500px;
float: left;
}
.lunbo1 .tu1{
background-image: url(../img/1.jpg);
}
.tu2{
background-image: url(../img/5.jpg);
}
.tu3{
background-image: url(../img/3.jpg);
}
.tu4{
background-image: url(../img/4.jpg);
}
var timer=null,
index=0,
dots=ById("biaoti").getElementsByTagName("div"),
pict=ById("banner").getElementsByTagName("div"),
size=pict.length;
function ById(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
//定义一个函数,使得能够兼容所有的浏览器
function addHandler(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,true);
}
else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}
else{
element['on'+type]=handler;
}
}
function startAutoPlay(){
timer=setInterval(function(){
index++;
if(index>=size){
index=0;
}
changeImg();
},1000)
}
function changeImg(){
for(var i=0;i<pict.length;i++){
pict[i].style.display="none";
}
pict[index].style.display="block";
}
上述分别为我的html css和js的代码内容,主要是F12查询没有报错,改的时候也没有思路,不知道从哪里改,还有咨询一下老师,对于F12浏览器选择器中的内容,有没有资料之类的?我之前调试的时候发现console.log()使用没有效果? 这个时候去哪里找问题的根源呢?
正在回答
同学你好,请问是如下资料吗?
是有调用startAutoPlay的:
祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星