老师我的效果出不来？

老师我的效果出不来？

//封装getElementById()
  function byId(id){
      return   typeof(id)==="String"?document.getElementById('id'):id;
  }
        var
            timer=null,
            pics=byId("banner").getElementsByTagName('div'),
            len=pics.length,
            index=0;
        function slideImg(){
//取出mian元素
    var main=byId("main");
//打开页面自动执行图片轮播
    main.onmouseout();
//鼠标放置在图片上
       // main.onmouseover=function(){
       //   if(timer)
       // clearInterval(timer);
       // }
//鼠标从图片上移走时
      main.onmouseout=function(){
       timer= setInterval(function(){
        index++;
        if(index==len)
            index=0;
        //切换图片
        changeimg();
        },2000);
      }
  }
//i切换图片
     changeimg(){
        //遍历banner里所有的div,将其隐藏
    for(var i=0;i<len;i++)
        pics[i].style.display="none";
    //根据索引找到当前div,将其显示出来
    pics[index].style.display='block';
       }
      slideImg();

我先写了鼠标离开图片时的事件，可是没效果
liqihang 2018-04-11
源自：项目：JavaScript轮播图   3-1 封装getElementById（）
33
收起

正在回答 回答被采纳积分+1

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

6回答
提问者 liqihang 2018-04-12 15:33:32

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>综合案例</title>
 <link rel="stylesheet" type="text/css" href="综合案例.css">
<body>
 <div class="main" id="main">
  <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="myself.js">
  
 </script>
</body>
</html>

css代码：

*{
 margin: 0;
 padding: 0;
}
body{
 font-family: "微软雅黑";
 color: #14191e;
}
.main{
 width: 1200px;
 height: 460px;
 overflow: hidden;
 margin: 30px auto;
 position: relative;
}
.banner{
 width: 1200px;
 height: 460px;
 overflow: hidden;
 position: relative;
}
.banner-slide{
 width: 1200px;
 height: 460px;
  background-repeat: no-repeat;
  position: absolute;
     display: none;
}
.slide1{
 background-image:url(img\\bg1.jpg);
}

.slide2{
 background-image:url(img\\bg2.jpg);
}

.slide3{
 background-image:url(img\\bg3.jpg);
}
.slide-active{
 display: block;
}
.button{
 position: absolute;
 width: 40px;
 height: 80px;
 left: 244px;
 top: 50%;
 margin-top: -40px;
 background: url("img\\arrow.png") no-repeat center center;
 
 }
.prev{
 transform: rotate(180deg);
}
.next{
 right: 0;
 left: auto;
}
.button:hover{
 background-color: #333;
 opacity: 0.5;
}
.dots{
 
 position: absolute;
 bottom: 20px;
 right: 0;
 text-align: right;
 margin-right: 30px;
}
 span{
   width: 12px;
   height: 12px;
   border-radius: 50%;
   line-height: 12px;
   background-color:black;
   opacity: 0.4;
   background:rgba(7,17,27,0.4);
  /*添加阴影*/
   box-shadow: 0 0 0 1px rgba(255,255,255,0.8) inset;
   display: inline-block;
  margin-left: 10px;
  /*光标形状*/
  cursor: pointer;
}
.active{
 background: #fff;
 box-shadow: 0 0 0 1px rgba(7,17,27,0.4) inset;
}

js代码：

     var index=0,
         timer=null,
         pics= byId("banner").getElementsByTagName("div"),
         dots= byId("dots").getElementsByTagName('span'),
         prev= byId("prev"),
         next= byId("next"),
         len =pics.length;
        
         //封装getElementById()
         function byId(id){
      return typeof(id)==="String"?document.getElementById(id):id;
        }
      
 
        function slideImg(){
//取出mian元素
    var main=byId("main");
   
//鼠标放置在图片上, 清除定时器,停止自动播放
       main.onmouseover=function(){
       if(timer){
       clearInterval(timer);
    }
       }
//鼠标从图片上移走时，调用onmouseout事件
      main.onmouseout=function(){
     timer = setInterval(function(){
       index++;
       if(index >= len){
          index = 0;
       }
       changeImg();
   },3000);
      }
       //打开页面自动执行图片轮播,调用onmouseout方法
       main.onmouseout();
 
  //遍历所有点击，且绑定点击事件，点击圆点切换图片
  for(var d=0;d<len;d++){
    //给所有span添加一个id的属性，值为d，作为当前span的索引
    dots[d].id=d;
    dots[d].onclick=function(){
        index=this.id;
        changeImg();
    }
  }
 //下一张
 next.onclick=function(){
    index++;
    if (index>=len)
    {
        index=0;
    }
    changeImg();
 }
 //上一张
 prev.onclick=function(){
    index--;
    if (index<0)
     {
        index=len-1;
     }
     changeImg();
 }
}
  //切换图片
    function changeImg(){
        //遍历banner里所有的div,将其隐藏
    for(var i=0;i<len;i++)
    {
        pics[i].style.display="none";
        dots[i].className="";
    }
    //根据索引找到当前div,将其显示出来
    pics[index].style.display="block";
    docs[index].className="active";
    }
     slideImg();



0
收起回答
  • 一叶知秋519 #1
    https://class.imooc.com/course/qadetail/46824 见这个问答的回复，祝学习愉快！
    2018-04-12 16:44:01
提问者 liqihang 2018-04-12 12:18:53

     var index=0,
         timer=null,
         pics= byId("banner").getElementsByTagName("div"),
         dots= byId("dots").getElementsByTagName('span'),
         prev= byId("prev"),
         next= byId("next"),
         len =pics.length;
        
         //封装getElementById()
         function byId(id){
      return typeof(id)==="String"?document.getElementById(id):id;
        }
        //切换图片
    function changeImg(){
        //遍历banner里所有的div,将其隐藏
    for(var i=0;i<len;i++)
    {
        pics[i].style.display="none";
        dots[i].className="";
    }
    //根据索引找到当前div,将其显示出来
    pics[index].style.display='block';
    docs[index].className="active";
    }
        function slideImg(){
//取出mian元素
    var main=byId("main");

//鼠标放置在图片上
       main.onmouseover=function(){
         if(timer)
       clearInterval(timer);
       }
//鼠标从图片上移走时，调用onmouseout事件
      main.onmouseout=function(){
       timer= setInterval(function(){
        index++;
        if(index>=len)
            index=0;
        //切换图片
        changeImg();
        },2000);
      }
       //打开页面自动执行图片轮播,调用onmouseout方法
       main.onmouseout();
 
  //遍历所有点击，且绑定点击事件，点击圆点切换图片
  for(var d=0;d<len;d++)
  {
    //给所有span添加一个id的属性，值为d，作为当前span的索引
    dots[d].id=d;
    dots[d].onclick=function(){
        index=this.id;
        changeImg();
    }
  }
 //下一张
 next.onclick=function(){
    index++;
    if (index>=len)
    {
        index=0;
    }
    changeImg();
 }
 //上一张
 prev.onclick=function(){
    index--;
    if (index<0)
     {
        index=len-1;
     }
     changeImg();
 }
}
     slideImg();


0
收起回答
  • 喜欢做梦的鱼 #1
    不知道同学是否已经参考楼上老师的建议进行了对照调整。目前无论是老师源码还是助教老师提供的参考代码都是经过验证后无误的。如果同学参考后仍然无法实现效果，请新建回答贴出所有完整代码，包括，HTML,CSS,JS
    2018-04-12 14:09:02
  • 提问者 liqihang 回复 喜欢做梦的鱼 #2
    全代码在上方贴出，请老师这次一定要帮我找到问题所在
    2018-04-12 15:34:10
一叶知秋519 2018-04-12 10:49:15

这是帮助你修改后的代码，建议同学对照一下：

HTML页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<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="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 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>

script.js页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var timer = null,
    index = 0,
    pics = byId("banner").getElementsByTagName("div"),
    dots = byId("dots").getElementsByTagName("span"),
    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";
   }
   pics[index].style.display = "block";
}
function slideImg(){
    var main = byId("main");
    main.onmouseover = function(){
    }
    main.onmouseout = function(){
     timer = setInterval(function() {
              index++;
              if (index >= size)
                  index = 0;
              //切换图片
              changeImg();
          }, 2000);
    }
}
slideImg();

祝学习愉快！

0
收起回答
  • 提问者 liqihang #1
    老师救命啊，我快疯了， 我一字一句对照着课堂老师的代码写的，可就是任何效果都没有，html和css都对着，就是不知道这js文件哪里出错啦，搞了一上午了，愣是没看出哪里错了，js代码在上方贴出
    2018-04-12 12:20:37
一叶知秋519 2018-04-11 19:15:29

你说的效果是什么效果呢？是轮播切换的效果，还是点击按钮的效果，建议同学清晰的描述你的问题。

0
收起回答
  • 提问者 liqihang #1
    关于js的效果都没有，不知道为什么， 自动播放不了。点击按钮也不行，代码看起来都是跟着老师敲的，不知道哪里有问题
    2018-04-11 19:29:49
提问者 liqihang 2018-04-11 18:53:07

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>综合案例</title>
 <link rel="stylesheet" type="text/css" href="综合案例.css">
<body>
 <div class="main">
  <div class="banner">
   <a href="javascript:void();">
    <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 class=" button prev" id="prev"></a>>
   <a class=" button next" id="next"></a>
  
  <div class="dots">
   <span class="active"></span>
   <span></span>
   <span></span>
  </div>
 </div>
 <script src="综合案例.js"> </script>
</body>
</html>

*{
 margin: 0;
 padding: 0;
}
body{
 font-family: "微软雅黑";
 color: #14191e;
}
.main{
 width: 1200px;
 height: 460px;
 overflow: hidden;
 margin: 30px auto;
 position: relative;
}
.banner{
 width: 1200px;
 height: 460px;
 overflow: hidden;
 position: relative;
}
.banner-slide{
 width: 1200px;
 height: 460px;
  background-repeat: no-repeat;
  position: absolute;
     display: none;
}
.slide1{
 background-image:url(img\\bg1.jpg);
}

.slide2{
 background-image:url(img\\bg2.jpg);
}

.slide3{
 background-image:url(img\\bg3.jpg);
}
.slide-active{
 display: block;
}
.button{
 position: absolute;
 width: 40px;
 height: 80px;
 left: 244px;
 top: 50%;
 margin-top: -40px;
 background: url("img\\arrow.png") no-repeat center center;
 /*background-color: gray;*/
 

}
.prev{
 transform: rotate(180deg);
}
.next{
 right: 0;
 left: auto;
}
.button:hover{
 background-color: #333;
 opacity: 0.5;
}
.dots{
 
 position: absolute;
 bottom: 20px;
 right: 0;
 text-align: right;
 margin-right: 30px;
}
.dots span{
   width: 12px;
   height: 12px;
   border-radius: 50%;
   line-height: 12px;
   /*background-color:black;
   opacity: 0.4;*/
   background:rgba(7,17,27,0.4);
  /*添加阴影*/
   box-shadow: 0 0 0 1px rgba(255,255,255,0.8) inset;
   display: inline-block;
  margin-left: 10px;
  cursor: pointer;/*光标形状*/
}
.active{
 background: #fff;
 box-shadow: 0 0 0 1px rgba(7,17,27,0.4) inset;
}

//封装getElementById()
  function byId(id){
      return   typeof(id)==="String"?document.getElementById('id'):id;
  }
        var timer=null;
        var pics=byId("banner").getElementsByTagName("div");
        var dots=byId("dots").getElementsByTagName('span');
        var prev=byId("prev");
        var next=byId("next");
        var len=pics.length;
        var index=0;
        function slideImg(){
//取出mian元素
    var main=byId("main");

//鼠标放置在图片上
       main.onmouseover=function(){
         if(timer)
       clearInterval(timer);
       }
//鼠标从图片上移走时，调用onmouseout事件
      main.onmouseout=function(){
       timer= setInterval(function(){
        index++;
        if(index==len)
            index=0;
        //切换图片
        changeImg();
        },2000);
      }
       //打开页面自动执行图片轮播,调用onmouseout方法
       main.onmouseout();
 
  //遍历所有点击，且绑定点击事件，点击圆点切换图片
  for(var d=0;d<len;d++)
  {
    //给所有span添加一个id的属性，值为d，作为当前span的索引
    dots[d].id=d;
    dots[d].onclick=function(){
        idnex=this.id;
        chingeImg();
    }
  }
 //下一张
 next.onclick=function(){
    index++;
    if (index>=len)
    {
        index=0;
    }
    changeImg();
 }
 //上一张
 prev.onclick=function(){
    idnex--;
    if (index<0)
     {
        index=len-1;
     }
     changeImg();
 }
}
//切换图片
    function changeImg(){
        //遍历banner里所有的div,将其隐藏
    for(var i=0;i<len;i++)
    {
        pics[i].style.display="none";
        dots[i].className=" ";
    }
    //根据索引找到当前div,将其显示出来
    pics[index].style.display='block';
    docs[index].className="active";
    }
      slideImg();


0
收起回答
一叶知秋519 2018-04-11 18:11:48

你把你的其他代码也贴一下吧，方便帮助你调试代码，解答问题。祝学习愉快！

0
收起回答
  • 提问者 liqihang #1
    代码在上面贴出， 我照着课堂老师讲的敲了一边，效果都出不来~~~~
    2018-04-11 18:54:05
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

老师效果出不来。。。
11 0 3
老师，效果出不来
11 0 2
老师，我写的效果对不对
30 0 3
老师为什么我的hover效果没出来
9 0 2
div加上hover之后效果没出来
0 0 7

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

从网页搭建入门Java Web2018版
  • 参与学习           人
  • 提交作业       1088    份
  • 解答问题       10204    个

如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！

了解课程

本课精华内容

问答 作业

为什么这样不报错？

6 1

老师请问一下

1 4

老师这样写可以嘛

2 1

老师这样写可以吗

7 1

我为了实现两行三列的效果，设置了三级div。老师您看，这样编程符合要求吗

10 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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