当前位置: 乐呵网 > js学习网 > JavaScript特效 >

JavaScript 图片切换展示结果

时间:2014-06-17 10:34来源:乐呵网提供 作者:乐呵网 点击:
JavaScript 图片切换展示效果

  措施说明:
this._slider.style[style] = (iNow + iStep) + "px"; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); 下面例子里的容器布局: Code 要雅观的话需要css配置一下: Code .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; }样式的配置跟措施也有必然干系,譬喻宽和高,这里就不说明白。 接着就可以实例化了: var tv = new TransformView ("idTransformView", "idSlider", 168, 3, { onStart : function(){ Each(objs, function(o, i) { o.className = tv.Index == i ? "on" : ""; }) }//按钮样式 });

  在切换之前先执行Start()函数,举办相关配置,


  在initialize()函数里初始化一些属性。
  首先需要一个容器,配置它的overflow为hidden,position为relative;
){ ; } ; }   用方针值减当前值再除以一个参数,获得步长,
  主要是配置Index属性(索引)和_target属性(方针值):
  然后在top(或left)的配置中加上这个步长,并配置按时器继承Move(),直到达到方针值:
【IT168技能文档】
  这样取得的步长在当前值越靠近方针值时会越来越小,也做成了减速的结果,
  容器内里还要一个滑动工具,配置它的position为absolute;
(责任编辑:admin)

------分隔线----------------------------