老师,为什么我的轮播图效果出不来呢

老师,为什么我的轮播图效果出不来呢

http://img1.sycdn.imooc.com//climg/5ed13ee109cc015c05440436.jpg

http://img1.sycdn.imooc.com//climg/5ed13ee1093ea35006430442.jpg

http://img1.sycdn.imooc.com//climg/5ed13ee109bff27509920587.jpg

http://img1.sycdn.imooc.com//climg/5ed13ee109c4c17708340542.jpg

老师,您好,我想咨询一下为什么我的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()使用没有效果? 这个时候去哪里找问题的根源呢?


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,请问是如下资料吗?

http://img1.sycdn.imooc.com//climg/5ed201c009e27b6b03830118.jpg

是有调用startAutoPlay的:

http://img1.sycdn.imooc.com//climg/5ed201db09177c8005940736.jpg

祝学习愉快~

  • 键盘f11 提问者 #1
    好嘞,谢谢老师,您的答疑一下子让清楚了很多,谢谢老师
    2020-05-30 15:04:46
好帮手慕码 2020-05-30 13:41:44

同学你好,图片是重叠的。调用startAutoPlay()方法即可:

http://img1.sycdn.imooc.com//climg/5ed1d822095f6eff05200308.jpg
另,关于“对于F12浏览器选择器中的内容”没有这类资料哦,只能通过自己的细心、以及报错调试。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 提问者 键盘f11 #1
    谢谢老师,果然,图片有轮播的效果了,奇怪了,为什么我看资料里面的代码老师没有使用startAutoPlay(),这个输出的调用呢?
    2020-05-30 14:01:43
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师