隨筆 - 59  文章 - 70  trackbacks - 0
          <2008年8月>
          272829303112
          3456789
          10111213141516
          17181920212223
          24252627282930
          31123456

          常用鏈接

          留言簿(5)

          隨筆分類

          隨筆檔案

          搜索

          •  

          積分與排名

          • 積分 - 173687
          • 排名 - 340

          最新評論

          閱讀排行榜

          評論排行榜

          今天寫的頁面里要求實現廣告圖片自動轉換的功能,在網上搜了一下,這個還滿好用,先收藏
          <html><!-- 腳本代碼開始 -->
          <head>
          <script language="JavaScript" type="text/javascript">
          <!--
          var bannerAD=new Array();
          var adNum=0;

          bannerAD[0]='cyjq_R_banner1.jpg';
          bannerAD[1]='cyjq_R_banner2.jpg';
          bannerAD[2]='cyjq_R_banner.jpg';

          var preloadedimages=new Array();
          for (i=1;i<bannerAD.length;i++) {
          preloadedimages[i]=new Image();
          preloadedimages[i].src=bannerAD[i];

          }

          function setTransition() {
          if (document.all) {
          bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
          bannerADrotator.filters.revealTrans.apply();
          }
          }

          function playTransition() {
          if (document.all) {
          bannerADrotator.filters.revealTrans.play();
          }
          }

          function nextAd() {
          if (adNum<bannerAD.length-1) {
          adNum++;
          } else {
          adNum=0;
          }
          setTransition();
          document.images.bannerADrotator.src=bannerAD[adNum];
          playTransition();
          theTimer=setTimeout("nextAd()", 5000);
          }
          //-->
          </script>
          <!-- 腳本代碼結束 -->
          </head>
          <body>
          <!--調用開始-->
          <table>
          <td width="159" valign="middle">
          <img src="" name="bannerADrotator" width="159" height="184" style="FILTER: revealTrans(duration=2,transition=20);">
          <script language="JavaScript" type="text/javascript">
          nextAd()
          </script></td>
          <!-- 調用結束 -->

          </table>
          </body>
          </html>
          還有一個牛人寫的JS
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
          <title>JavaScript 圖片切換展示效果</title>
          </head>
          <body>
          <style type="text/css">
          .container, .container *{margin:0; padding:0;}

          .container{width:169px; height:323px; overflow:hidden;}

          .slider{position:absolute;}
          .slider li{ list-style:none;display:inline;}
          .slider img{ width:169px; height:323px; display:block;}

          .slider2{width:2000px;}
          .slider2 li{float:left;}

          .num{ position:absolute; right:5px; bottom:5px;}
          .num li{
          float: left;
          color: #FF7300;
          text-align: center;
          line-height: 16px;
          width: 16px;
          height: 16px;
          font-family: Arial;
          font-size: 12px;
          cursor: pointer;
          overflow: hidden;
          margin: 3px 1px;
          border: 1px solid #FF7300;
          background-color: #fff;
          }
          .num li.on{
          color: #fff;
          line-height: 21px;
          width: 21px;
          height: 21px;
          font-size: 16px;
          margin: 0 1px;
          border: 0;
          background-color: #FF7300;
          font-weight: bold;
          }
          </style>
          <div class="container" id="idTransformView">
          <ul class="slider" id="idSlider">
          <li><img src="cyjq_R_banner1.jpg"/></li>
          <li><img src="cyjq_R_banner2.jpg"/></li>
          <li><img src="cyjq_R_banner.jpg"/></li>
          </ul>
          <ul class="num" id="idNum">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          </ul>
          </div>

          <br />

          <div class="container" id="idTransformView2">
          <ul class="slider slider2" id="idSlider2">
          <li><img src="cyjq_R_banner1.jpg"/></li>
          <li><img src="cyjq_R_banner2.jpg"/></li>
          <li><img src="cyjq_R_banner.jpg"/></li>
          </ul>
          <ul class="num" id="idNum2">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          </ul>
          </div>

          <br />

          <div>
          <input id="idStop" type="button" value=" 停止自動 " />
          <input id="idStart" type="button" value=" 開始自動 " />
          <br /><br /><input id="idPre" type="button" value=" <- 上一個 " />
          <input id="idNext" type="button" value=" 下一個 -> " />
          <br /><br />
          切換速度:
          <input id="idFast" type="button" value=" + 加 速 " />
          <input id="idSlow" type="button" value=" - 減 速 " />
          <br /><br />
          停頓時間:
          <input id="idAdd" type="button" value=" + 加時間 " />
          <input id="idReduce" type="button" value=" - 減時間 " />
          <br /><br />
          <input id="idReset" type="button" value=" Reset " />
          </div>

          <script type="text/javascript">
          var $ = function (id) {
          return "string" == typeof id ? document.getElementById(id) : id;
          };

          var Class = {
          create: function() {
          return function() {
          this.initialize.apply(this, arguments);
          }
          }
          }

          Object.extend = function(destination, source) {
          for (var property in source) {
          destination[property] = source[property];
          }
          return destination;
          }

          var TransformView = Class.create();
          TransformView.prototype = {
          //容器對象,滑動對象,切換參數,切換數量
          initialize: function(container, slider, parameter, count, options) {
          if(parameter <= 0 || count <= 0) return;
          var oContainer = $(container), oSlider = $(slider), oThis = this;

          this.Index = 0;//當前索引

          this._timer = null;//定時器
          this._slider = oSlider;//滑動對象
          this._parameter = parameter;//切換參數
          this._count = count || 0;//切換數量
          this._target = 0;//目標參數

          this.SetOptions(options);

          this.Up = !!this.options.Up;
          this.Step = Math.abs(this.options.Step);
          this.Time = Math.abs(this.options.Time);
          this.Auto = !!this.options.Auto;
          this.Pause = Math.abs(this.options.Pause);
          this.onStart = this.options.onStart;
          this.onFinish = this.options.onFinish;

          oContainer.style.overflow = "hidden";
          oContainer.style.position = "relative";

          oSlider.style.position = "absolute";
          oSlider.style.top = oSlider.style.left = 0;
          },
          //設置默認屬性
          SetOptions: function(options) {
          this.options = {//默認值
          Up: true,//是否向上(否則向左)
          Step: 5,//滑動變化率
          Time: 10,//滑動延時
          Auto: true,//是否自動轉換
          Pause: 2000,//停頓時間(Auto為true時有效)
          onStart: function(){},//開始轉換時執行
          onFinish: function(){}//完成轉換時執行
          };
          Object.extend(this.options, options || {});
          },
          //開始切換設置
          Start: function() {
          if(this.Index < 0){
          this.Index = this._count - 1;
          } else if (this.Index >= this._count){ this.Index = 0; }

          this._target = -1 * this._parameter * this.Index;
          this.onStart();
          this.Move();
          },
          //移動
          Move: function() {
          clearTimeout(this._timer);
          var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep(this._target, iNow);

          if (iStep != 0) {
          this._slider.style[style] = (iNow + iStep) + "px";
          this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
          } else {
          this._slider.style[style] = this._target + "px";
          this.onFinish();
          if (this.Auto) { this._timer = setTimeout(function(){ oThis.Index++; oThis.Start(); }, this.Pause); }
          }
          },
          //獲取步長
          GetStep: function(iTarget, iNow) {
          var iStep = (iTarget - iNow) / this.Step;
          if (iStep == 0) return 0;
          if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
          return iStep;
          },
          //停止
          Stop: function(iTarget, iNow) {
          clearTimeout(this._timer);
          this._slider.style[this.Up ? "top" : "left"] = this._target + "px";
          }
          };

          window.onload=function(){
          function Each(list, fun){
          for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
          };

          var objs = $("idNum").getElementsByTagName("li");

          var tv = new TransformView("idTransformView", "idSlider", 168, 3, {
          onStart : function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) }//按鈕樣式
          });

          tv.Start();

          Each(objs, function(o, i){
          o.onmouseover = function(){
          o.className = "on";
          tv.Auto = false;
          tv.Index = i;
          tv.Start();
          }
          o.onmouseout = function(){
          o.className = "";
          tv.Auto = true;
          tv.Start();
          }
          })

          ////////////////////////test2

          var objs2 = $("idNum2").getElementsByTagName("li");

          var tv2 = new TransformView("idTransformView2", "idSlider2", 408, 3, {
          onStart: function(){ Each(objs2, function(o, i){ o.className = tv2.Index == i ? "on" : ""; }) },//按鈕樣式
          Up: false
          });

          tv2.Start();

          Each(objs2, function(o, i){
          o.onmouseover = function(){
          o.className = "on";
          tv2.Auto = false;
          tv2.Index = i;
          tv2.Start();
          }
          o.onmouseout = function(){
          o.className = "";
          tv2.Auto = true;
          tv2.Start();
          }
          })

          $("idStop").onclick = function(){ tv2.Auto = false; tv2.Stop(); }
          $("idStart").onclick = function(){ tv2.Auto = true; tv2.Start(); }
          $("idNext").onclick = function(){ tv2.Index++; tv2.Start(); }
          $("idPre").onclick = function(){ tv2.Index--;tv2.Start(); }
          $("idFast").onclick = function(){ if(--tv2.Step <= 0){tv2.Step = 1;} }
          $("idSlow").onclick = function(){ if(++tv2.Step >= 10){tv2.Step = 10;} }
          $("idReduce").onclick = function(){ tv2.Pause-=1000; if(tv2.Pause <= 0){tv2.Pause = 0;} }
          $("idAdd").onclick = function(){ tv2.Pause+=1000; if(tv2.Pause >= 5000){tv2.Pause = 5000;} }

          $("idReset").onclick = function(){
          tv2.Step = Math.abs(tv2.options.Step);
          tv2.Time = Math.abs(tv2.options.Time);
          tv2.Auto = !!tv2.options.Auto;
          tv2.Pause = Math.abs(tv2.options.Pause);
          }

          }
          </script>
          </body>
          </html>
          posted on 2008-08-05 11:28 JasonChou 閱讀(3203) 評論(1)  編輯  收藏 所屬分類: html

          FeedBack:
          # JPEG 圖像 2008-09-13 17:22 zhuhao
          JPEG 圖像JPEG 圖像JPEG 圖像  回復  更多評論
            
          主站蜘蛛池模板: 南靖县| 宜兴市| 家居| 元氏县| 罗定市| 巴青县| 钟山县| 泸定县| 平顶山市| 宝鸡市| 安龙县| 奉贤区| 牙克石市| 定兴县| 蒙山县| 沈阳市| 万宁市| 乡宁县| 和静县| 天长市| 长顺县| 石景山区| 白水县| 扎兰屯市| 新乡县| 阿勒泰市| 长葛市| 康定县| 安国市| 辽源市| 全椒县| 台山市| 黄龙县| 班玛县| 平罗县| 湟中县| 前郭尔| 饶平县| 远安县| 六安市| 昌黎县|