想要鼠标放在圆点上的时候切换图片,怎么弄呀

想要鼠标放在圆点上的时候切换图片,怎么弄呀

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
            var timer='';
            var index=0;
            var banner=document.getElementById('top_wrap');
            var li=banner.getElementsByTagName('li');
            var a=banner.getElementsByTagName('div');
            var main=document.getElementById('banner');
            var len=a.length;
            for(var i=0; i<li.length; i++){
                li[i].index=i;
                li[i].onmouseover=function(){
                    for(var i=0;i<li.length; i++){
                        li[i].className='';
                    }this.className='bg';
                    for(var i=0; i<a.length; i++){
                        a[i].className='active';
                    }a[this.index].className='';
                }
        }
            function changeimg(){
                for(var i=0; i<a.length; i++){
                    a[i].style.display='none';
                }a[index].style.display='block';
            }
            function slideimg(){
                main.onmouseover=function(){
                    if(timer){
                        clearInterval(timer);
                    }
                }
                main.onmouseout=function(){
                    timer=setInterval(function(){
                        index++;
                        if(index>=len){
                            index=0;
                        }
                            changeimg();
                    },2000);
                }
                main.onmouseout();
            }
            slideimg();
             
             
             
<div id="top_wrap">
        <div><img src="img/bg1.jpg"></div>
        <div class="active"><img src="img/bg2.jpg"></div>
        <div class="active"><img src="img/bg3.jpg"></div>
        <ul>
            <li class="bg"></li>
            <li></li>
            <li></li>
        </ul>
        </div>


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

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

2回答
一叶知秋519 2018-05-15 13:58:59

建议同学继续学习,在后面的课程中会讲解到的~~

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

祝学习愉快!

  • 提问者 这个头像是黑豹 #1
    我不是想点击的,是想鼠标放上去就切换的,麻烦您帮我看下,求~
    2018-05-15 14:01:14
  • 建议同学先根据老师的课程完成案例以后再进行扩展,如果不想要点击,想要把鼠标滑过圆点就切换,可以把对应的事件换一下~~例如把点击事件替换成鼠标进入事件mouseenter后再试下~~
    2018-05-15 15:54:57
提问者 这个头像是黑豹 2018-05-15 12:24:01
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

了解课程
请稍等 ...
微信客服

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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