轮播图

讲解见代码：

方法一

<!DOCTYPE html>

<html>

    <head>

       <meta charset="UTF-8">

       <title>沙县小吃</title>

    </head>

    <body>

沙县小吃

       <img src="../img/01.jpg" id="pic">

       <script>

       var pics=["../img/01.jpg","../img/02.jpg","../img/03.jpg"];

           //每三秒钟切换一次

           var index=0;//当前显示的图片编号

           var loop=true;

           function change(){

              index=(index+1)%3;

              //获取图片对象

              var obj=document.getElementById("pic");

              obj.src=pics[index];

              if(loop){

                  setTimeout(change,3000);

              }

           }

           //添加事件处理

           var pic=document.getElementById("pic");

           pic.onmouseover=function(){

              //停止轮播

              //alert("onmouseover");

               loop=true;

           }

           pic.onmouseout=function(){

              //继续轮播

              //alert("mouseout");

              loop=true;

              setTimeout(change,3000);

           }

       </script>

    </body>

</html>

方法二：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="UTF-8">

       <title></title>

       <style type="text/css">

           #title{

              background-color: #AFEEEE;

              text-align: center;

           }

           #pic{

              width: 100%;

           }

       </style>

    </head>

    <body>

       <div id="title">

全聚德

       </div>

       <div>

           <img src="../img/01.jpg" id="pic"></ing>

       </div>

       <script>

           var pics =["../img/01.jpg","../img/02.jpg","../img/03.jpg"];

           var index=0;

           var img=document.getElementById("pic");

           function change(){

              index=(index+1)%3;

              img.src=pics[index];//图片切换

           }

           //设定定时器 每隔3秒钟切换一张图片

           var tt=setInterval(change,3000);

           img.onmouseover=function(){

              clearInterval(tt);//停止轮播

           }

           img.onmouseout=function(){

              tt=setInterval(change,3000);

           }

       </script>

    </body>

</html>