JQuery综合案例（六）

一、广告显示和隐藏

需求：

当页面加载完成，3秒后，自动显示广告

广告显示5秒后，自动消失

分析：

使用定时器，setTimeout（执行一次定时器）

JQuery的显示和隐藏动画就是控制display

使用show,hide完成广告显示和隐藏

实现

<script>
    $(function(){
   		 setTimeout(adShow,3000);
   		 setTimeout(adHide,8000);
	});

	function adShow(){
   		 $("#ad").show("slow");
	}

	function adHide(){
         $("#ad").hide("slow");
	}
</script>

二、抽奖案例

分析：

1.给开始按钮绑定单击事件

定义循环定时器

切换小相框的src属性（定义数组，存放图片资源路径；生成随机数 ，数组索引）

2.给结束按钮绑定单击事件

停止定时器（清空定时器）

给大相框设置src属性。

<script>
    var imgs = ["../img/man001.jpg",
                "../img/man002.jpg".
                "../img/man003.jpg",
                "../img/man004.jpg",]; 
	var startId;
	var index;
    $(function(){
        //处理按钮时否可以使用的效果
        $("#startbtn").prop("disabled",false);//可用
        $("#stopbtn").prop("disabled",true);
    	 $("#startbtn").click(function(){
              $("#stopbtn").prop("disabled",false);
            startid = setInterval(function(){
                index = Math.floor(Math.random()*7);
                 $("#img1ID").prop（"src",imgs[index]）；
             });
         });
   		$("#stopbtn").click(function(){
            $("#startbtn").prop("disabled",true);
             clearInterval(startId);
             $("#img2ID").prop（"src",imgs[index]）；
         });
	});

	
</script>