老师 为什么点击圆点不能切换
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main" id="main">
<div class="menu-box"></div>
<!--图片轮播-->
<div class="banner" id="banner">
<a href="">
<div class="banner-slide slide1 slide-active"></div>
</a>
<a href="">
<div class="banner-slide slide2"></div>
</a>
<a href="">
<div class="banner-slide slide3"></div>
</a>
</div>
<a href="javascript:void(0)" class="button prev" id="prev"></a>
<a href="javascript:void(0)" class="button next" id="next"></a>
<div class="dots" id="dots">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
*{
margin:0;
padding:0;
}
@font-face {font-family: 'iconfont';
src: url('../img/font/iconfont.eot');
src: url('../img/font/iconfont.eot') format('embedded-opentype'),
url('../img/font/iconfont.woff') format('woff'),
url('../img/font/iconfont.ttf') format('truetype'),
url('../img/font/iconfont.svg#iconfont') format('svg');
}
a{
text-decoration: none;
}
a:link,a:visited{
color:#5e5e5e;
}
body{
font-family:"微软雅黑";
color: #14191e;
}
.main{
width:1200px;
height:460px;
margin:30px auto;
position:relative;
overflow:hidden;
}
.banner{
width:1200px;
height:460px;
overflow:hidden;
position:relative;
}
.banner-slide{
width:1200px;
height:460px;
background-repeat:no-repeat;
float:left;
display:none;
}
.slide-active{
display:block;
}
.slide1{
background-image:url(../img/bg1.jpg);
}
.slide2{
background-image:url(../img/bg2.jpg);
}
.slide3{
background-image:url(../img/bg3.jpg);
}
.button{
position:absolute;
top: 50%;
width: 40px;
height:80px;
left: 244px;
margin-top: -40px;
background-image: url("../img/arrow.png");
background-position: center center;
background-repeat: no-repeat;
}
.prev{
transform:rotate(180deg);
}
.next{
left:auto;
right:0;
transform:rotate(0deg);
}
.button:hover{
background-color:#333;
opacity: 0.8;
filter:alpha(opacity=80);
}
.dots{
position: absolute;
bottom: 24px;
right: 0;
text-align: right;
padding-right: 24px;
line-height: 12px;
}
.dots span{
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-left: 8px;
background-color: rgba(7, 17, 27, 0.4);
cursor: pointer;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}
.dots .active{
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
}
.menu-box{
}
function byid(id){
//String改为string，"id"将双引号去掉
//return typeof(id)==="String"?document.getElementById(id):"id";
return typeof(id)==="string"?document.getElementById(id):id;
}
var timer = null;
var banner=byid("banner");
// var img=banner.getElementsTagName("div");
var img=banner.getElementsByTagName("div");
var prev=byid("prev");
var next=byid("next");
//将length()中的()去掉，这个不是函数
//var length=img.length();
var length=img.length;
var index=0;
var dots=byid("dots").getElementsByTagName("span");
function stopAutoPlay(){
if (timer) {
// clearIntTerval(timer);单词拼写有误
clearInterval(timer);
}
}
// 图片轮播
function startAutoPlay(){
timer=setInterval(function(){
index++;
if(index>=length){
index=0;
}
witch();
},3000)
//少一个大括号
}
function slideTmg(){
//单词拼写有误，mian改为main
//var mian=byid("main");
var main=byid("main");
// 图片轮播事件
//单词拼写有误，mian改为main;onmouseove少写一个r
//mian.onmouseove=function(){
main.onmouseover=function(){
stopAutoPlay();
}
main.onmouseout=function(){
startAutoPlay();
}
main.onmouseout();
/*
上一张
*/
prev.onclick=function(){
index--;
if (index<0) {
index=length-1;
}
witch();
}
/*
下一张
*/
next.onclick=function(){
index++;
if (index>=length) {
index=0;
}
witch();
}
/*
圆点切换图片
*/
for(var i=0,len=dots.length;i<len;i++){
dots[i].id=i;
dots[i].onclick=function(){
indext= this.id;
witch();
}
}
}
/*
实现图片切换
*/
function witch(){
for(var i =0; i<length; i++){
img[i].style.display="none";
dots[i].className="";
}
img[index].style.display="block";
dots[index].className="active";
}
slideTmg();
正在回答
同学你好，witch方法中是根据全局变量index值进行修改的，但同学并未在圆点切换图片的代码中修改index值，自然也就无法切换图片了。 建议将indext修改为index。修改后代码如下：
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星