JavaScript 圖片切換展示效果alibaba拓展版

更新時間：2008年09月15日 10:27:44 作者：

看到alibaba的一個圖片切換效果，感覺不錯，想拿來用用。但代碼一大堆的，看著昏，還是自己來吧。由于有了做圖片滑動展示效果的經(jīng)驗，做這個就容易得多了。

<!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:408px; height:168px; overflow:hidden;} .slider{position:absolute;} .slider li{ list-style:none;display:inline;} .slider img{ width:408px; height:168px; 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   id="vzb7upn"   class="container" id="idTransformView"> <ul class="slider" id="idSlider"> <li><img src="1.jpg"/></li> <li><img src="2.jpg"/></li> <li><img src="3.gif"/></li> </ul> <ul class="num" id="idNum"> <li>1</li> <li>2</li> <li>3</li> </ul> </div>  <div   id="zsjbzey"   class="container" id="idTransformView2"> <ul class="slider slider2" id="idSlider2"> <li><img src="1.jpg"/></li> <li><img src="2.jpg"/></li> <li><img src="3.gif"/></li> </ul> <ul class="num" id="idNum2"> <li>1</li> <li>2</li> <li>3</li> </ul> </div>  <div> <input id="idStop" type="button" value=" 停止自動 " /> <input id="idStart" type="button" value=" 開始自動 " /> <input id="idPre" type="button" value=" <- 上一個 " /> <input id="idNext" type="button" value=" 下一個 -> " />  切換速度： <input id="idFast" type="button" value=" + 加 速 " /> <input id="idSlow" type="button" value=" - 減 速 " />  停頓時間： <input id="idAdd" type="button" value=" + 加時間 " /> <input id="idReduce" type="button" value=" - 減時間 " />  <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 = { //容器對象,滑動對象,切換參數(shù),切換數(shù)量 initialize: function(container, slider, parameter, count, options) {     if(parameter <= 0 || count <= 0) return;     var oContainer = $(container), oSlider = $(slider), oThis = this;     this.Index = 0;//當(dāng)前索引          this._timer = null;//定時器     this._slider = oSlider;//滑動對象     this._parameter = parameter;//切換參數(shù)     this._count = count || 0;//切換數(shù)量     this._target = 0;//目標(biāo)參數(shù)          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; }, //設(shè)置默認(rèn)屬性 SetOptions: function(options) {     this.options = {//默認(rèn)值         Up:            true,//是否向上(否則向左)         Step:        5,//滑動變化率         Time:        10,//滑動延時         Auto:        true,//是否自動轉(zhuǎn)換         Pause:        2000,//停頓時間(Auto為true時有效)         onStart:    function(){},//開始轉(zhuǎn)換時執(zhí)行         onFinish:    function(){}//完成轉(zhuǎn)換時執(zhí)行     };     Object.extend(this.options, options || {}); }, //開始切換設(shè)置 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>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: