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需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript实现网站顶部出现几秒后图片缓慢消失的效果
快过年了，很多网站首页都放上了新春的祝福，有些是直接换成皮肤了，而有些则是用一张很大的图片放在网站顶部，在倒数几秒后，缓慢升上去直到最后消失。
2011-01-01
js 图片上传前大小长宽验证代码
今天整理了一段代码，用于图片上传前预览，并获取图片的长、宽、及字节数，可以用于图片上传前的校验。
2010-03-03
javascript 图片上一张下一张链接效果代码
人人网相册和酷狗音乐网站上面当鼠标移动到图片上面，鼠标的形状会根据其在图片上的位置改变。
2010-03-03
cloudgamer出品ImageZoom 图片放大效果
这个效果也叫放大镜效果，最早好像在ppg出现的，之后就有了很多仿制品出来了。
2010-04-04
使用html+css制作一个发光立方体特效
这篇文章主要介绍了使用html+css制作一个发光立方体特效,发光的同时立方体自动旋转,非常炫酷的特效,来一起学习一下怎么制作吧
2023-03-03
来自国外的一款Js图片浏览效果
国外的Js图片浏览效果，在国外的一些网站见到的比较多，国内人都喜允左右箭头控制，用缩略图控制其它更合理呢，因此本代码重新优化一下还是很适合使用的呢。
2010-07-07
纯js无flash仿搜狐女人频道FLASH图片切换效果代码
2008-01-01
用javascript制作放大镜放大图片
用javascript制作放大镜放大图片...
2006-07-07
照片各部分的彩色与黑白交替更换
照片各部分的彩色与黑白交替更换...
2007-02-02
仿Vista进程条效果
仿Vista进程条效果...
2007-03-03

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具