JavaScript 图片切换展示效果alibaba拓展版

更新时间：2008年09月15日 10:27:44 作者：

看到alibaba的一个图片切换效果，感觉不错，想拿来用用。但代码一大堆的，看着昏，还是自己来吧。由于有了做图片滑动展示效果的经验，做这个就容易得多了。

<!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 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 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 = { //容器对象,滑动对象,切换参数,切换数量 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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

仿Vista进程条效果
仿Vista进程条效果...
2007-03-03
js实现图片显示局部，鼠标经过显示全部的效果
2008-01-01
图片向上滚动
图片向上滚动...
2006-07-07
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
推荐自用 Javascript 缩图函数 (onDOMLoaded)……...
2007-10-10
JS实现鼠标移动到缩略图显示大图的图片放大效果
一个网页上用的图片提示效果，当把鼠标移动到图片缩略图的时候，会显示图片大图，似乎在网上这是个很常见的效果，实现方法也比较多，有人用CSS，有人用JavaScript，有人用jQuery，总之，选择自己习惯的方式去实现，就是最棒的。
2012-12-12
js 图片轮播(5张图片)
网上比较常见的用jquery实现的图片轮播效果代码。
2008-12-12
javascript 图片上一张下一张链接效果代码
人人网相册和酷狗音乐网站上面当鼠标移动到图片上面，鼠标的形状会根据其在图片上的位置改变。
2010-03-03
JS 相册效果自动播放[本地整合]
具有自动播放功能,图片显示不但具有渐隐渐现,自动伸缩的效果,还能像放电影一样的感觉!
2008-12-12
javascript椭圆旋转相册实现代码
支持自动和手动两种模式：自动模式下自动旋转展示，手动模式下通过鼠标选择当前图片，或通过提供的接口选择上一张/下一张图片
2012-01-01
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
一般页面的的图片为了布局考虑，显示大小都小于实际大小。鼠标在图片上移动时，在旁边展示一个跟此图片显示大小一样的层。并讲鼠标附近区域对应的原始图片的区域按原始大小显示在这个层中。
2009-04-04