前端开发 JS轮播图

用mac前端开发工具 企业级前端开发视频 前端开发面试人事问题

先理一下整体思路；
1：轮播图主要功能以及会用到的知识
a：正常情况下图片需要自己播放（定时器）
b：鼠标移入图片停止播放（清除定时器，onmouseout）
c：鼠标移出图片恢复自动播放（onmouseout）
d：图片变化的情况下相应的按钮会发生样式的变化（注意图片和按钮可以共用一个按钮）
e：鼠标移入按钮图片停止播放，同时切换到与按钮对应的图片上，按钮的样式会发生变化（onmouseover）
f：鼠标移出按钮图片恢复自动播放（onmouseout）
2：js代码部分（相信学到js的朋友们对布局没有什么问题了，所以为了简化笔记，就只贴上js部分代码啦）

//图片自动更换

            var timer=1000;//自动换图的时间
            var nums=1;//按钮和图片共同使用的变量
            var dsq;
        window.onload=function f(){
                      //一下三行是给按钮设置初始值，让一个按钮一开始就以不一样的样式呈现
            var obj = document.getElementById('li1');
            obj.style.background="none";
            obj.style.border="1px red solid";
            dsq=setInterval("auto()",timer);  //定时器
        }
                     //自动播放的具体代码            
        function auto(){
            var img = document.getElementById('img1');
            if(nums>4){
                nums=1;
            }
            img.src="images/"+nums+".jpg";
            for(j=1;j<=4;j++){
                var obj = document.getElementById('li'+j);              
                obj.style.background="red";
                obj.style.border="none";
            }               
            var li = document.getElementById('li'+nums);                
            li.style.background="none";
            li.style.border="1px red solid";
            nums++;
        }
        //鼠标移入图片停止播放
        function stop(){
            window.clearInterval(dsq);
        }
        //鼠标移出恢复自动播放
        function star(){
                    //这里有个注意点就是一定要加上dsq，否则浏览器会认为每次移出重新创建
                     定时器，这样多次移入移出轮播图就会乱套了
            dsq=setInterval("auto()",timer);
        }
        //鼠标移入按钮更换图片，同时更改按钮样式
        function btn(m){   //*****这里的实参换成了m原来是nums，nums原来是一个共有变量
            window.clearInterval(dsq);
            var img = document.getElementById('img1');
        //鼠标移入按钮对应的图片显示
            img.src="images/"+m+".jpg";//这里的m原来是nums        
        //按钮发的样式发生改变
            for(j=1;j<=4;j++){
                var obj = document.getElementById('li'+j);              
                obj.style.background="red";
                obj.style.border="none";                                        
            }               
            var li = document.getElementById('li'+m);//这里的m原来是nums      
            li.style.background="none";
            li.style.border="1px red solid";
                             nums=m+1;//****这里是后来加上的，正式因为这个函数的实参用的是共变量导致的我下方评论中描述的错误
                                        这样当我鼠标移除后顺便给muns复制告诉浏览器我刚刚移入的是第几个，我移除后你让下一个显示
        }

                   //body部分代码
            <div>
        <img id="img1" src="images/1.jpg" onmouseover="stop()" onmouseout="star()">   
        <ul class="btn">
            <li id="li1" onmouseover="btn(1)" onmouseout="star()"></li>
            <li id="li2" onmouseover="btn(2)" onmouseout="star()"></li>
            <li id="li3" onmouseover="btn(3)" onmouseout="star()"></li>
            <li id="li4" onmouseover="btn(4)" onmouseout="star()"></li>
        </ul>
    </div>

游戏开发需要前端 mac前端开发软件 前端开发面试模板内容