全局变量问题要善用(图片轮播)

作者在 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>

菜鸟晋级中 | 阅读 2009 次
文章评论,共0条
游客请输入验证码
浏览16983次
最新评论