腾讯首页js图片切换效果

很漂亮的腾讯网图片切换效果

 

代码

< HTML >
< HEAD >
< TITLE > 腾讯软件 - 图片滑动效果，阿里西西整理收集。 < / TITLE>
< style >  
BODY {
 PADDING - BOTTOM: 0px; MARGIN: 0px; PADDING - LEFT: 0px; PADDING - RIGHT: 0px; PADDING - TOP: 0px
}
UL {
 PADDING - BOTTOM: 0px; MARGIN: 0px; PADDING - LEFT: 0px; PADDING - RIGHT: 0px; PADDING - TOP: 0px
}
.container {
 WIDTH: 610px; HEIGHT: 205px
}
.container A IMG {
 WIDTH: 610px; HEIGHT: 205px
}
.container IMG {
 BORDER - BOTTOM - STYLE: none; BORDER - RIGHT - STYLE: none; BORDER - TOP - STYLE: none; BORDER - LEFT - STYLE: none
}
.td_f A IMG {
 PADDING - BOTTOM: 0px; MARGIN: 0px; PADDING - LEFT: 0px; PADDING - RIGHT: 0px; PADDING - TOP: 0px
}
.num {
 POSITION: absolute; WIDTH: 90px; FLOAT: right; TOP: 180px; LEFT: 520px
}
.num LI {
 TEXT - ALIGN: center; LINE - HEIGHT: 15px; LIST - STYLE - TYPE: none; MARGIN: 1px; WIDTH: 15px; FONT - FAMILY: Arial; BACKGROUND: url(http: // pc.qq.com/pc/images/flashbutton.gif) no-repeat -15px 0px; FLOAT: left; HEIGHT: 15px; COLOR: #86a2b8; FONT-SIZE: 12px; CURSOR: pointer
}
.num LI.on {
 LINE - HEIGHT: 15px; WIDTH: 15px; BACKGROUND: url(http: // pc.qq.com/pc/images/flashbutton.gif) no-repeat; HEIGHT: 15px; COLOR: #ffffff
}
.more {
 FLOAT: right
}
.more1 A {
 TEXT - ALIGN: left; LINE - HEIGHT: 25px; MARGIN: 0px 0px 0px 10px; COLOR: #3373a3
}
< / style>
< SCRIPT language = javascript >
         if ( typeof (pgvMain)  ==   ' function ' )
                pgvMain();
< / SCRIPT>
< SCRIPT >
var  gtopTab = " one " ;
function  $id(id){
  return  document.getElementById(id); 
}
function  changesTab(tab_id){
  if  (tab_id == gtopTab){
   return ; 
 } else {
  $id(gtopTab).className = " unselect " ; 
  $id(tab_id).className = " select " ;
  $id( " tab_ " + gtopTab).style.display = " none " ;
  $id( " tab_ " + tab_id).style.display = " block " ;
  gtopTab = tab_id;
 }
}
< / SCRIPT>
< SCRIPT type = text / javascript>
var  $  =   function  (id) {
  return   " string "   ==   typeof  id  ?  document.getElementById(id) : id;
};
var  Extend  =   function (destination, source) {
  for  ( var  property  in  source) {
  destination[property]  =  source[property];
 }
  return  destination;
}
var  CurrentStyle  =   function (element){
  return  element.currentStyle  ||  document.defaultView.getComputedStyle(element,  null );
}
var  Bind  =   function (object, fun) {
  var  args  =  Array.prototype.slice.call(arguments).slice( 2 );
  return   function () {
   return  fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
 }
}
var  Tween  =  {
 Quart: {
  easeOut:  function (t,b,c,d){
    return   - c  *  ((t = t / d-1)*t*t*t - 1) + b;
  }
 },
 Back: {
  easeOut:  function (t,b,c,d,s){
    if  (s  ==  undefined) s  =   1.70158 ;
    return  c * ((t = t / d-1)*t*((s+1)*t + s) + 1) + b;
  }
 },
 Bounce: {
  easeOut:  function (t,b,c,d){
    if  ((t / =d) < (1 / 2.75 )) {
     return  c * ( 7.5625 * t * t)  +  b;
   }  else   if  (t  <  ( 2 / 2.75)) {
     return  c * ( 7.5625 * (t -= ( 1.5 / 2.75))*t + .75) + b;
   }  else   if  (t  <  ( 2.5 / 2.75)) {
     return  c * ( 7.5625 * (t -= ( 2.25 / 2.75))*t + .9375) + b;
   }  else  {
     return  c * ( 7.5625 * (t -= ( 2.625 / 2.75))*t + .984375) + b;
   }
  }
 }
}
// 容器对象,滑动对象,切换数量
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:   4000 , // 停顿时间(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);
  }
};
< / SCRIPT>
< BODY >
告诉你一个应有尽有的网页特效网址： < a href = " http://js.alixixi.com " > http: // js.alixixi.com</a>
< hr  / >
< DIV id = idContainer2 class = container >
< TABLE id = idSlider2 border = 0  cellSpacing = 0  cellPadding = 0 >
   < TBODY >
< TR >
< TD class = td_f >< A onclick = " pgvSendClick({hottag:'ISD.SHOW.BANNER.SOFTMGR'}); "  href = " http://js.alixixi.com " >< IMG src = " http://pc.qq.com/pc/images/manage.jpg " >< / A>< / TD >
< TD class = td_f >< A onclick = " pgvSendClick({hottag:'ISD.SHOW.BANNER.PY'}); "  href = " http://js.alixixi.com " >< IMG src = " http://pc.qq.com/pc/images/py.jpg " >< / A>< / TD >
< TD class = td_f >< A onclick = " pgvSendClick({hottag:'ISD.SHOW.BANNER.PLAYER'}); "  href = " http://js.alixixi.com " >< IMG src = " http://pc.qq.com/pc/images/player.jpg " >< / A>< / TD >
< TD class = td_f >< A onclick = " pgvSendClick({hottag:'ISD.SHOW.BANNER.XF'}); "   href = " http://js.alixixi.com " >< IMG src = " http://pc.qq.com/pc/images/xf.jpg " >< / A>< / TD >
< TD class = td_f >< A onclick = " pgvSendClick({hottag:'ISD.SHOW.BANNER.TT'}); "   href = " http://js.alixixi.com " >< IMG  src = " http://pc.qq.com/pc/images/TT.jpg " >< / A>< / TD >
< / TR>
   < / TBODY>
< / TABLE>
< UL id = idNum class = num >< / UL>
< / DIV>
< SCRIPT >
// new SlideTrans("idContainer", "idSlider", 3).Run();
// /
var  forEach  =   function (array, callback, thisObject){
  if (array.forEach){
  array.forEach(callback, thisObject);
 } else {
   for  ( var  i  =   0 , len  =  array.length; i  <  len; i ++ ) { callback.call(thisObject, array[i], i, array); }
 }
}
var  st  =   new  SlideTrans( " idContainer2 " ,  " idSlider2 " ,  5 , { Vertical:  false  });
var  nums  =  [];
// 插入数字
for ( var  i  =   0 , n  =  st._count  -   1 ; i  <=  n;){
 (nums[i]  =  $( " idNum " ).appendChild(document.createElement( " li " ))).innerHTML  =   ++ i;
}
forEach(nums,  function (o, i){
 o.onmouseover  =   function (){ o.className  =   " on " ; st.Auto  =   false ; st.Run(i); }
 o.onmouseout  =   function (){ o.className  =   "" ; st.Auto  =   true ; st.Run(); }
})
// 设置按钮样式
st.onStart  =   function (){
 forEach(nums,  function (o, i){ o.className  =  st.Index  ==  i  ?   " on "  :  "" ; })
}
// $("idAuto").onclick = function(){
  // if(st.Auto){
   // st.Auto = false; st.Stop(); this.value = "自动";
  // }else{
   // st.Auto = true; st.Run(); this.value = "停止";
  // }
// }
// $("idNext").onclick = function(){ st.Next(); }
// $("idPre").onclick = function(){ st.Previous(); }
// $("idTween").onchange = function(){
  // switch (parseInt(this.value)){
   // case 2 :
    // st.Tween = Tween.Bounce.easeOut; break;
   // case 1 :
    // st.Tween = Tween.Back.easeOut; break;
   // default :
    // st.Tween = Tween.Quart.easeOut;
  // }
// }
st.Run();
< / SCRIPT>
< / BODY>< / HTML >

 

 

转载于:https://www.cnblogs.com/s7mmersupport/archive/2010/06/11/1756727.html