全局变量问题要善用（图片轮播） - lucky

作者在 2016-11-16 10:08:01 发布以下内容

两个看似一模一样的程序都是要实现图片轮播功能为什么会出现一个会出现时间错乱问题呢关键在于变量

*******************************************************************************

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
   *{ margin:0px; padding:0px;}
   div{ border:1px solid #ccc; width:220px; height:220px; background-image:url(img/1.jpg); margin:50px auto; overflow:hidden;}
   ul{ list-style:none; overflow:hidden;}
   li{ width:20px; height:20px; margin:10px; border:1px solid #ccc; float:left; display:block; text-align:center;}
</style>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
   var $js=1;
   $(function(){
       $('li').mouseover(function(){
           clearInterval(aa)
           var zhi=$(this).text();
           $("div").css("background-image",'url(img/'+zhi+'.jpg)');
           $("li").css({"background-color":"#fff","color":"#000"});
           $(this).css({"background-color":"#F00","color":"#fff"});
       });
       $('li').mouseout(function(){
               $(this).css({"background-color":"#fff","color":"#000"});
                  aa=setInterval("js()",1000);
       });
   });
   function js(){
           $("div").css("background-image",'url(img/'+$js+'.jpg)');
           $("li").each(function() {
                if($(this).html()==$js){
                   $(this).css({"background-color":"#F00","color":"#fff"});
               } else{
                   $(this).css({"background-color":"#fff","color":"#000"});
               }
             });
           $js++;
           if($js==5){
               $js=1
           }
       };
      aa=setInterval("js()",1000);//善用变量
</script>
</head>

<body>
   <div>
       <ul>
           <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>

</html>

********************************************************************************

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
   *{ margin:0px; padding:0px;}
   div{ border:1px solid #ccc; width:220px; height:220px; background-image:url(img/1.jpg); margin:50px auto; overflow:hidden;}
   ul{ list-style:none; overflow:hidden;}
   li{ width:20px; height:20px; margin:10px; border:1px solid #ccc; float:left; display:block; text-align:center;}
</style>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
   var $js=1;
   $(function(){
       $('li').mouseover(function(){
           clearInterval(aa)
           var zhi=$(this).text();
           $("div").css("background-image",'url(img/'+zhi+'.jpg)');
           $("li").css({"background-color":"#fff","color":"#000"});
           $(this).css({"background-color":"#F00","color":"#fff"});
       });
       $('li').mouseout(function(){
               $(this).css({"background-color":"#fff","color":"#000"});
               var aa=setInterval("js()",1000);//善用
       });
   });
   function js(){
           $("div").css("background-image",'url(img/'+$js+'.jpg)');
           $("li").each(function() {
                if($(this).html()==$js){
                   $(this).css({"background-color":"#F00","color":"#fff"});
               } else{
                   $(this).css({"background-color":"#fff","color":"#000"});
               }
             });
           $js++;
           if($js==5){
               $js=1
           }
       };
   var aa=setInterval("js()",1000);//善用变量
</script>
</head>

<body>
   <div>
       <ul>
           <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>
</html>