JavaScript 图片切换展示效果

程序说明原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。首先需要一个容器，程序会自动设置容器overflow为hidden，如果不是相对或绝对定位会同时设置position为relative，
滑动对象会设置为绝对定位：Code
var p = CurrentStyle(this._container).position;
p == "relative" || p == "absolute" || (this._container.style.position = "relative");
this._container.style.overflow = "hidden";
this._slider.style.position = "absolute";
如果没有设置Change切换参数属性，会自动根据滑动对象获取：Code
this.Change = this.options.Change ? this.options.Change :
    this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;
执行Run方法就会开始进入切换，其中有一个可选参数用来重新设置要切换的图片索引：Code
index == undefined && (index = this.Index);
index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
之后就到设置使用tween缓动时需要的参数了，
包括_target(目标值)、_t(时间)、_b(初始值)和_c(变化量)：
this._target = -Math.abs(this.Change) * (this.Index = index);
this._t = 0;
this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]);
this._c = this._target - this._b;
还有Duration(持续时间)是自定义属性。参数设置好后就执行Move程序开始移动了。
里面很简单，首先判断_c是否有值（等于0表示不需要移动）和_t是否到达Duration，
未满足条件就继续移动，否则直接移动到目标值并进行下一次切换：
if (this._c && this._t < this.Duration) {
    this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));
    this._timer = setTimeout(Bind(this, this.Move), this.Time);
}else{
    this.MoveTo(this._target);
    this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));
}
使用说明实例化需要3个参数，分别是容器对象，滑动对象和切换数量，之后可以直接执行Run方法运行：new SlideTrans("idContainer", "idSlider", 3).Run();
还有以下可选属性：
Vertical: true,//是否垂直方向（方向不能改）
Auto:  true,//是否自动
Change:  0,//改变量
Duration: 50,//滑动持续时间
Time:  10,//滑动延时
Pause:  2000,//停顿时间(Auto为true时有效)
onStart: function(){},//开始转换时执行
onFinish: function(){},//完成转换时执行
Tween:  Tween.Quart.easeOut//tween算子其中Vertical初始化后就不能修改，Tween算子可参照这里的缓动效果选择（实例中选了其中3个）。还有提供了以下方法：
Next: 切换下一个
Previous: 切换上一个
Stop: 停止自动切换
还有上面说到的Run

程序代码var SlideTrans = function(container, slider, count, options) {
this._slider = $(slider);
this._container = $(container);//容器对象
this._timer = null;//定时器
this._count = Math.abs(count);//切换数量
this._target = 0;//目标值
this._t = this._b = this._c = 0;//tween参数

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

this.SetOptions(options);

this.Auto = !!this.options.Auto;
this.Duration = Math.abs(this.options.Duration);
this.Time = Math.abs(this.options.Time);
this.Pause = Math.abs(this.options.Pause);
this.Tween = this.options.Tween;
this.onStart = this.options.onStart;
this.onFinish = this.options.onFinish;

var bVertical = !!this.options.Vertical;
this._css = bVertical ? "top" : "left";//方向

//样式设置
var p = CurrentStyle(this._container).position;
p == "relative" || p == "absolute" || (this._container.style.position = "relative");
this._container.style.overflow = "hidden";
this._slider.style.position = "absolute";

this.Change = this.options.Change ? this.options.Change :
this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;
};
SlideTrans.prototype = {
  //设置默认属性
  SetOptions: function(options) {
this.options = {//默认值
Vertical: true,//是否垂直方向（方向不能改）
Auto: true,//是否自动
Change: 0,//改变量
Duration: 50,//滑动持续时间
Time: 10,//滑动延时
Pause: 2000,//停顿时间(Auto为true时有效)
onStart: function(){},//开始转换时执行
onFinish: function(){},//完成转换时执行
Tween: Tween.Quart.easeOut//tween算子
};
Extend(this.options, options || {});
  },
  //开始切换
  Run: function(index) {
//修正index
index == undefined && (index = this.Index);
index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
//设置参数
this._target = -Math.abs(this.Change) * (this.Index = index);
this._t = 0;
this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]);
this._c = this._target - this._b;

this.onStart();
this.Move();
  },
  //移动
  Move: function() {
clearTimeout(this._timer);
//未到达目标继续移动否则进行下一次滑动
if (this._c && this._t < this.Duration) {
this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));
this._timer = setTimeout(Bind(this, this.Move), this.Time);
}else{
this.MoveTo(this._target);
this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));
}
  },
  //移动到
  MoveTo: function(i) {
this._slider.style[this._css] = i + "px";
  },
  //下一个
  Next: function() {
this.Run(++this.Index);
  },
  //上一个
  Previous: function() {
this.Run(--this.Index);
  },
  //停止
  Stop: function() {
clearTimeout(this._timer); this.MoveTo(this._target);
  }
};

对AJAX有兴趣的朋友，欢迎加入群78514534
对ASP.NET和C#有兴趣的朋友，欢迎加入67226009

楼主的作品不光JavaScript代码漂亮，连mm也很漂亮，收藏了

<!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>www.lanrentuku.com</title>
<SCRIPT language=javascript src="js/changimages.js" type="text/javascript"></SCRIPT><STYLE type=text/css>
body{font-size:12px}
.pic_show {PADDING-RIGHT: 10px; DISPLAY: inline; PADDING-LEFT: 0px; BACKGROUND: url(images/bg_show.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 12px; MARGIN: 3px 0px 0px 17px; WIDTH: 247px; PADDING-TOP: 8px; HEIGHT: 323px
}
</STYLE>
</head>
<BODY><br><table width="300" height="496" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="376" height="362" align="center"><div class=pic_show>
      <div id=imgADPlayer></div>
      <script type="text/jscript" language="javascript">
PImgPlayer.addItem( "", "http://www.lanrentuku.com/", "images/01.jpg");
PImgPlayer.addItem( "", "http://www.lanrentuku.com/", "images/02.jpg");
PImgPlayer.addItem( "", "http://www.lanrentuku.com/", "images/03.jpg");
PImgPlayer.addItem( "", "http://www.lanrentuku.com/", "images/04.jpg");
PImgPlayer.addItem( "", "http://www.lanrentuku.com/", "images/05.jpg");
PImgPlayer.addItem( "", "http://www.lanrentuku.com/", "images/06.jpg");
PImgPlayer.addItem( "", "http://www.lanrentuku.com/", "images/07.jpg");
PImgPlayer.addItem( "", "http://www.lanrentuku.com/", "images/08.jpg");
PImgPlayer.addItem( "", "http://www.lanrentuku.com/", "images/09.jpg");

PImgPlayer.init( "imgADPlayer", 247, 323 );
</script>
    </div></td>
  </tr>
  <tr>
    <td height="134" align="center"><p>来源：<a href="http://www.zcom.com/" target="_blank">ZCOM电子杂志</a>　</p>
      <p> 投稿：<a href="http://www.mybbss.com/" target="_blank">分享多一点</a>（一 D~  ）代码整理：<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a>　 </p>
      <p>＊尊重他人劳动成果，转载请自觉注明出处！</p>
    <p>注：此代码仅供学习交流，请勿用于商业用途。</p></td>
  </tr>
</table></BODY></html>

                link.href = this._items[this._index].link;
                link.title = this._items[this._index].title;
                link.style.background = 'url(' + this._items[this._index].img + ') no-repeat center center';
                //
                var liStyle = "margin:0;list-style-type: none; margin:0;padding:0; float:right;";
                var baseSpacStyle = "clear:both; display:block; width:23px;line-height:18px; font-size:12px; FONT-FAMILY:'宋体'; opacity: 0.6;";
                baseSpacStyle += "border:1px solid #fff;border-right:0;border-bottom:0;";
                baseSpacStyle += "color:#fff;text-align:center; cursor:pointer; ";
                var ulHTML = "";
                for(var i = this._items.length -1; i >= 0; i--){
                        var spanStyle = "";
                        if( i==this._index ){
                                spanStyle = baseSpacStyle + "background:#ff0000;";
                        } else {
                                spanStyle = baseSpacStyle + "background:#000;";
                        }
                        ulHTML += "<li style=\""+liStyle+"\">";
                        ulHTML += "<span onmouseover=\"PImgPlayer.mouseOver(this);\" onmouseout=\"PImgPlayer.mouseOut(this);\" style=\""+spanStyle+"\" onclick=\"PImgPlayer.play("+i+");return false;\" herf=\"javascript:;\" title=\"" + this._items[i].title + "\">" + (i+1) + "</span>";
                        ulHTML += "</li>";
                }
                this._container.getElementsByTagName("UL")[0].innerHTML = ulHTML;
        },
        mouseOver : function(obj){
                var i = parseInt( obj.innerHTML );
                if( this._index!=i-1){
                        obj.style.color = "#ff0000";
                }
        },
        mouseOut : function(obj){
                obj.style.color = "#fff";
        }
}

调试易

JavaScript 图片切换展示效果

解决方案 »