html+javascript图片轮播的问题
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播</title>
    <style>
    body,div,ul,li,a,img{margin: 0;padding: 0;}
    ul,li{list-style: none;}
    #banner{width: 50em;height: 23em;position: absolute;left: 18em;margin: 10px auto;overflow: hidden;}
    .imglist{width: 250em;position: absolute;}
    #banner img{width: 50em;height:23em;float: left;}
    .infolist{position: absolute;bottom: 1em;left: 20em;}
    .infolist li{width: 10px;height: 10px;border-radius: 5px;background: white;float: left;margin-left: 1em;cursor: pointer;}
    .infolist .cur{background: red;}

    </style>
</head>
<body>

        <div id="banner">
            <ul class="imglist">
                <li><a href=""><img src="./image/img1.jpg" alt=""></a></li>
                <li><a href=""><img src="./image/img2.jpg" alt=""></a></li>
                <li><a href=""><img src="./image/img1.jpg" alt=""></a></li>
                <li><a href=""><img src="./image/img3.jpg" alt=""></a></li>
                <li><a href=""><img src="./image/img2.jpg" alt=""></a></li>
            </ul>
            <ul class="infolist">
                <li class="cur"></li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
            </ul>
        </div>

    <script>
    var banner=document.getElementById('banner');
    var uls=document.getElementsByTagName('ul');
    var imgs=uls[0].getElementsByTagName('li');
    var btn=uls[1].getElementsByTagName('li');
    var i=index=0;
    var play=null;

    console.log(uls,imgs,btn);
    /*window.onload=function(){
        uls[0].style.left=-100+'em';
    }
    */




    function show(a){//将按钮与图片关联
        for(i=0;i<btn.length;i++){          
            btn[i].className="";
            btn[a].className="cur";         
        }
        for(i=0;i<imgs.length;i++){
            uls[0].style.left=-a*50+'em';
        }       
        //console.log(a);
    }

                          for(i=0;i<btn.length;i++){//鼠标事件
            btn[i].index=i;
            btn[i].onmouseover=function(){
                show(this.index);

            }
        }

        function autoplay(){//自动播放方法
            play=setInterval(function(){

                index++;
                index>=btn.length&&(index=0);
                         show(index);
            },2500);
        }
        autoplay();
        banner.onmouseover=function(){//鼠标移入事件
            clearInterval(play);
        };
        btn.onmouseover=function(){
            clearInterval(play);
        };
        banner.onmouseout=function(){//鼠标移出事件
            autoplay();
        };



    </script>
</body>
</html>

btn[i].onmouseover触发后btn[i].index如何传到自动播放方法的index里?

3个回答

          btn[i].onmouseover=function(){
                show(this.index);
index=this.index
            }
KOPEv
KOPEv 试过,没有用
接近 4 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问