老师帮我看看，当我点击圆点索引的时候，为什么切换不到对应的图片

老师帮我看看，当我点击圆点索引的时候，为什么切换不到对应的图片

var index=0,
   prev=byId("prev"),//上一张
   next=byId("next"),//下一张
   pics=byId("banner").getElementsByTagName("a"),
   dots=byId("dots").getElementsByTagName("i"),
   size=pics.length;

function byId(id){
   return typeof (id)==="string" ? document.getElementById(id):id;
}
//切换图片
function changeImg(){
   //遍历所有图片，将图片隐藏，将圆点上的类清除
   for (var i=0;i<size;i++){
       pics[i].style.display="none";
       //dots[i].className="";
       dots[i].className = "slider_indicators_btn"
   }
   //显示当前图片
   pics[index].style.display="block";
   //dots[index].className = "active";
   //当前圆点高亮显示
   dots[index].className = "slider_indicators_btn active";
}
//点击上一张按钮显示上一张图片
prev.addEventListener("click",function () {
   index--;
   if (index<0) index = size-1;
   changeImg();
});
//点击下一张按钮显示下一张图片
next.addEventListener("click",function () {
   index++;
   if (index>=size) index = 0;
   changeImg();
})
//点击圆点索引切换图片
for(var d = 0;d<size;d++){
   dots[d].setAttribute("data-id",d);
   dots(dots[d],"click",function () {
       index =this.getAttribute("data-id");
       changeImg();
   });
}

*{
   margin: 0;
   padding: 0;
}
body{
   font-family:"微软雅黑";
   color: #14191e;
}
@font-face {
   font-family: 'iconfont';
   src: url('iconfont.eot');
   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
   url('iconfont.woff2') format('woff2'),
   url('iconfont.woff') format('woff'),
   url('iconfont.ttf') format('truetype'),
   url('iconfont.svg#iconfont') format('svg');
}
.main{
   width: 590px;
   height: 470px;
   margin: 10px auto;
   overflow: hidden;
   position: relative;
}
.banner{
   width: 590px;
   height: 470px;
   overflow: hidden;
}
.banner-slide{
   display: inline-block;
   width: 590px;
   height: 470px;
   display: none;
}
.slide-active{
   display: block;
}
.focus-item-img{
   display: block;
   width: 100%;
   height: 100%;
   transition: opacity .2s;
}
img{
   border: 0;
   vertical-align: middle;
}
.slider_control:hover {
   color: #fff;
   background-color: #999;
   background-color: rgba(0,0,0,.4);
}
#prev{
   left: 0;
   border-top-right-radius: 18px;
   border-bottom-right-radius: 18px;
}
#next{
   right: 0;
   border-top-left-radius: 18px;
   border-bottom-left-radius: 18px;
}
.slider_control{
   position: absolute;
   top: 50%;
   border-radius: 0;
   width: 25px;
   height: 35px;
   line-height: 35px;
   background-color: #d9d9d9;
   background-color: rgba(0,0,0,.15);
   margin-top: -20px;
   font-size: 15px;
   z-index: 2;
   border: none;
   outline: none;
   transition: background-color .2s ease;
}
.prev i{
   left: -3px;
}
.next i{
   right: -3px;
}
.slider_control i {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
   color: #fff;
   color: rgba(255,255,255,.8);
   transition: color .2s ease;
}
.iconfont {
   font-family: iconfont,sans-serif;
   font-style: normal;
   -webkit-text-stroke-width: .2px;
}
button{
   cursor: pointer;
}
.slider_indicators i.active{
   width: 9px;
   height: 9px;
   top: 2px;
   left: 0;
   border: 3px solid rgba(0,0,0,.1);
}
.banner .slider_indicators_btn{
   width: 8px;
   height: 8px;
   margin-right: 4px;
   border: 1px solid rgba(0,0,0,.05);
   background: rgba(255,255,255,.4);
}
.slider_indicators_btn{
   position: relative;
   display: inline-block;
   width: 4px;
   height: 4px;
   margin-right: 4px;
   border-radius: 50%;
   background: #999;
   transition: background .2s ease;
}
.slider_indicators{
   position: absolute;
   left: 50%;
   font-size: 0;
   z-index: 2;
   margin-left: 0!important;
   left: 30px;
   bottom: 20px;
   text-align: center;
   animation: skeletonShow .2s ease .1s both;
}
.active:before{
   content: "";
   width: 9px;
   height: 9px;
   position: absolute;
   border-radius: 50%;
   left: 0;
   background-color: white;
}


<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title>轮播图</title>
   <link rel="stylesheet" href="style4.css">
</head>
<body>
   <div class="main">
       <div class="banner" id="banner">
           <button class="slider_control prev"id="prev" aria-hidden="true" tabindex="-1">
               <i class="iconfont">&#xe63b;</i>
           </button>
           <a href="#" class="banner-slide slide1 slide-active">
               <img class="focus-item-img" src="img/d474fc22a9d71105.jpg">
           </a>
           <a href="#" class="banner-slide slide2">
               <img class="focus-item-img" src="img/d40e34d428cf67f1.jpg">
           </a>
           <a href="#" class="banner-slide slide3">
               <img class="focus-item-img" src="img/3a89552a02f32a19.jpg">
           </a>
           <a href="#" class="banner-slide slide4">
               <img class="focus-item-img" src="img/075149efd33cf8fe.jpg">
           </a>
           <a href="#" class="banner-slide slide5">
               <img class="focus-item-img" src="img/16a08ecb2ab64f5a.jpg">
           </a>
           <a href="#" class="banner-slide slide6">
               <img class="focus-item-img" src="img/6f21c7beb4406512.jpg">
           </a>
           <a href="#" class="banner-slide slide7">
               <img class="focus-item-img" src="img/34b6b971d0dfa459.jpg">
           </a>
           <a href="#" class="banner-slide slide8">
               <img class="focus-item-img" src="img/657dcc0790348e1d.jpg">
           </a>
           <button class="slider_control next" id="next" aria-hidden="true" tabindex="-1">
               <i class="iconfont">&#xe502;</i>
           </button>
           <div class="slider_indicators" id="dots" style="margin-left: -56.5px">
               <i class="slider_indicators_btn active"></i>
               <i class="slider_indicators_btn"></i>
               <i class="slider_indicators_btn"></i>
               <i class="slider_indicators_btn"></i>
               <i class="slider_indicators_btn"></i>
               <i class="slider_indicators_btn"></i>
               <i class="slider_indicators_btn"></i>
               <i class="slider_indicators_btn"></i>
           </div>
       </div>
   </div>
<script src="script4.js"></script>
</body>
</html>

http://img1.sycdn.imooc.com//climg/5dfb2c5809642f7603140152.jpg
慕妹8524794 2019-12-19
源自：项目：JS实现轮播图特效    3-4 按钮切换（2）
13
收起

正在回答

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

5回答
好帮手慕星星 回答被采纳获得+3积分 2019-12-19 16:56:43

同学你好，代码中并没有使用老师封装的addHandler方法，所以和视频中一样直接调用方法是不可以的。有两种修改方式：

1、和圆点点击事件一样，使用addEventListener：

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

2、和视频中一致，使用封装的方法，这段可以直接在资料源码中下载使用，放在js最前面：

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

然后调用：

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

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

这两个不要弄混哦，祝学习愉快！

1
收起回答
  • 慕妹8524794 提问者 #1
    谢谢老师，懂了。
    2019-12-19 17:00:03
提问者 慕妹8524794 2019-12-19 16:47:52

var index=0,
   timer = null,      //定时器
   main =byId("main"),
   prev=byId("prev"),//上一张
   next=byId("next"),//下一张
   pics=byId("banner").getElementsByTagName("a"),
   dots=byId("dots").getElementsByTagName("i"),
   size=pics.length;

function byId(id){
   return typeof (id)==="string" ? document.getElementById(id):id;
}
//清除定时器，停止自动轮播
function stopAutoPlay() {
   if (timer) {
       clearInterval(timer);
   }
}
//自动轮播
function startAutoPlay() {
   //间隔调用
   timer = setInterval(function () {
   index++;
   if (index>=size)index=0;
   changeImg();
   },2000)
}
//切换图片
function changeImg(){
   //遍历所有图片，将图片隐藏，将圆点上的类清除
   for (var i=0;i<size;i++){
       pics[i].style.display="none";
       //dots[i].className="";
       dots[i].className = "slider_indicators_btn"
   }
   //显示当前图片
   pics[index].style.display="block";
   //dots[index].className = "active";
   //当前圆点高亮显示
   dots[index].className = "slider_indicators_btn active";
}
//点击上一张按钮显示上一张图片
prev.addEventListener("click",function () {
   index--;
   if (index<0) index = size-1;
   changeImg();
})
//点击下一张按钮显示下一张图片
next.addEventListener("click",function () {
   index++;
   if (index>=size) index = 0;
   changeImg();
})
//点击圆点索引切换图片
for(var d = 0;d<size;d++){
   dots[d].setAttribute("data-id",d);
   dots[d].addEventListener("click",function () {
       index =this.getAttribute("data-id");
       changeImg();
   });
}

//鼠标滑入main，停止轮播
main(main,"mouseover",stopAutoPlay);
//鼠标滑入main，继续轮播
main(main,"mouseout",startAutoPlay);
//自动开启轮播
startAutoPlay();

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title>轮播图</title>
   <link rel="stylesheet" href="style4.css">
</head>
<body>
   <div class="main" id="main">
       <div class="banner" id="banner">
           <button class="slider_control prev"id="prev" aria-hidden="true" tabindex="-1">
               <i class="iconfont">&#xe63b;</i>
           </button>
           <a href="#" class="banner-slide slide1 slide-active">
               <img class="focus-item-img" src="img/d474fc22a9d71105.jpg">
           </a>
           <a href="#" class="banner-slide slide2">
               <img class="focus-item-img" src="img/d40e34d428cf67f1.jpg">
           </a>
           <a href="#" class="banner-slide slide3">
               <img class="focus-item-img" src="img/3a89552a02f32a19.jpg">
           </a>
           <a href="#" class="banner-slide slide4">
               <img class="focus-item-img" src="img/075149efd33cf8fe.jpg">
           </a>
           <a href="#" class="banner-slide slide5">
               <img class="focus-item-img" src="img/16a08ecb2ab64f5a.jpg">
           </a>
           <a href="#" class="banner-slide slide6">
               <img class="focus-item-img" src="img/6f21c7beb4406512.jpg">
           </a>
           <a href="#" class="banner-slide slide7">
               <img class="focus-item-img" src="img/34b6b971d0dfa459.jpg">
           </a>
           <a href="#" class="banner-slide slide8">
               <img class="focus-item-img" src="img/657dcc0790348e1d.jpg">
           </a>
           <button class="slider_control next" id="next" aria-hidden="true" tabindex="-1">
               <i class="iconfont">&#xe502;</i>
           </button>
           <div class="slider_indicators" id="dots" style="margin-left: -56.5px">
               <i class="slider_indicators_btn active"></i>
               <i class="slider_indicators_btn"></i>
               <i class="slider_indicators_btn"></i>
               <i class="slider_indicators_btn"></i>
               <i class="slider_indicators_btn"></i>
               <i class="slider_indicators_btn"></i>
               <i class="slider_indicators_btn"></i>
               <i class="slider_indicators_btn"></i>
           </div>
       </div>
   </div>
<script src="script4.js"></script>
</body>
</html>


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

0
收起回答
好帮手慕星星 2019-12-19 16:37:41

你好，同学粘贴图片中和之前代码不一致：

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

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

next只是一个按钮，所以通过索引获取一个元素的时候会报错；dots是所有的小圆点，是不是修改的时候不小心改错了呢？修改成dots就好了。

祝学习愉快！

0
收起回答
  • 提问者 慕妹8524794 #1
    不好意思，不小心修改了，谢谢老师
    2019-12-19 16:42:26
  • 提问者 慕妹8524794 #2
    老师还有最后一个问题，当我鼠标悬浮在图片上面的时候，图片停止轮播，放开鼠标继续轮播，JS我该如何绑定，不能main吗？
    2019-12-19 16:46:51
提问者 慕妹8524794 2019-12-19 16:25:35

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

0
收起回答
好帮手慕星星 2019-12-19 16:16:47

同学你好，测试代码有报错：

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

在40行说dots不是一个方法。绑定点击事件应该用addEventListener，参考修改：

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

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

0
收起回答
  • 提问者 慕妹8524794 #1
    老师帮我看看，还是会报错
    2019-12-19 16:25:59
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

老师点击小圆点就切换图片，给个思路，我不要答案
16 0 4
麻烦老师 为什么我的点击事件没有反应？
23 0 5
请老师帮忙看看代码。
0 1 4
圆点索引的提问
19 0 3
老师，我的图片显示顺序不对
24 0 5

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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