1
2
3
4
5
6
7
8
9
10
11

任务7.4 在网页中自动切换焦点图片

发布时间:2017-09-24 15:17   发布人:唐海和   浏览次数:4608

【任务7-4】在网页中自动切换焦点图片

【任务描述】

 在网页文档0704.html中编写javascript代码实现自动切换焦点图片的功能。

 网页中自动切换图片的浏览效果如图7-7所示,每一段时间切换一张图片,类似于幻灯片的功能。

【任务实施】

1.编写javascript代码

   打开网页文档0704.html,切换到【代码】视图,将光标置于“<div class="img_reg">”与“</div>”之间,然后输入下面所示的javascript代码。

<div class="img_reg">  

  <script language="javaScript" type="text/javascript">

    <!--

      function objSP_Article() {

           this.imgUrl=""; this.linkUrl=""; this.title=""; 

        }

                

      function slidePic_Article(_id) {

           this.ID=_id; this.width=0;this.height=0; 

           this.timeOut=5000; this.effect=23; 

           this.titleLen=0; this.picNum=-1; 

           this.img=null; this.url=null;this.title=null; 

           this.allPic=new Array(); 

           this.add=slidePic_Article_Add;

           this.show=slidePic_Article_Show; 

           this.loopShow=slidePic_Article_LoopShow;

       }

               

      function slidePic_Article_Add(_sp) {

           this.allPic[this.allPic.length] = _sp;

       }

               

      function slidePic_Article_Show() {

          if(this.allPic[0] == null) return false;

          document.write("<div align='center'><a id='url_"   this.ID 

                "' href='' target='_blank'><img id='img_"   this.ID 

                "' style='width:"   this.width   "px; height:"   this.height 

                "px; filter:revealTrans(duration=2,transition=23);' src='javascript:null' border='0'></a>");

          if(this.titleLen != 0) { document.write("<br/><span id='title_"   this.ID 

                                                    "'></span></div>"); }

          else{

                document.write("</div>");}

          this.img = document.getElementById("img_"   this.ID);

          this.url = document.getElementById("url_"   this.ID);

          this.title = document.getElementById("title_"   this.ID);

          this.loopShow();

       }

          

      function slidePic_Article_LoopShow() {

          if(this.picNum<this.allPic.length-1) this.picNum   ; 

          else this.picNum=0; 

          this.img.filters.revealTrans.Transition=this.effect; 

          this.img.filters.revealTrans.apply(); 

          this.img.src=this.allPic[this.picNum].imgUrl;

          this.img.filters.revealTrans.play();

          this.url.href=this.allPic[this.picNum].linkUrl;

          if(this.title) this.title.innerHTML=

              "<a href=" this.allPic[this.picNum].linkUrl " target='_blank'>"

               this.allPic[this.picNum].title "</a>";

              this.img.timer=setTimeout(this.ID ".loopShow()",this.timeOut);

         }

  

          var slidePic1= new slidePic_Article("slidePic1");

          slidePic1.width    = 142;

          slidePic1.height   = 64;

          slidePic1.timeOut  = 3000;

          slidePic1.effect   = 23;

          slidePic1.titleLen = 40;

          var osp = new objSP_Article();

          osp.imgUrl   = "images/0704angda.jpg";

          osp.linkUrl  = "#";

          osp.title    = "昂达商标";

          slidePic1.add(osp);

          var osp = new objSP_Article();

          osp.imgUrl  = "images/0704apple.jpg";

          osp.linkUrl = "#";

          osp.title   = "苹果商标";

          slidePic1.add(osp);

          var osp = new objSP_Article();

          osp.imgUrl  = "images/0704nokia.jpg";

          osp.linkUrl = "#";

          osp.title   = "诺基亚商标";

          slidePic1.add(osp);

          var osp = new objSP_Article();

          osp.imgUrl  = "images/0704oppo.jpg";

          osp.linkUrl = "#";

          osp.title   = "OPPO商标";

          slidePic1.add(osp);

          slidePic1.show();

    //-->

  </script>

</div>

2.分析自动切换图片的javascript代码

3.自动切换图片代码的应用

  (1)自行设置图片地址、图片链接地址和图片标题

  (2)自行增加图片的数量

4.效果图如下所示:

图片2.png


  • 魏玉娜 2017-09-28 10:17:59
    每一次的课都能学会很多东西,谢谢老师
  • 毕洁壮 2017-09-28 10:21:31
    谢谢老师的精彩讲课,每次都能学到很多东西
  • 徐勤翰 2017-09-28 10:23:11
    老师讲课很细致
  • 张传坤 2017-09-28 10:23:28
    老师讲的比较清晰明白,我学会了,谢谢老师!
  • 逯颖颖 2017-09-28 10:24:35
    讲的很好、细致
  • 刘佳 2017-09-28 10:24:52
    老师讲的很好,辛苦辛苦了
  • 杨永吉 2017-09-28 10:25:29
    讲课生动形象,容易理解,棒棒哒