合肥网站建设工作室

关注合肥工作室微信公众号,提供最新网站建设资讯

扫一扫微信二维码

很炫的一种JS封装图片切换效果

2011-03-27 16:27:48建站知识

合肥网站建设(LZ工作室)今天闲着无事,做了一款JS封装类的图片切换效果,先看下效果吧,效果图如下:msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
这种效果是如何实现的呢?那就看下面吧!首先介绍下本站:专业从事企业的电子商务网站建设、网站制作、网站优化,其实代码很少的,呵呵,先看下页面代码吧:

<div id="picBox">msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 <ul id="show_pic" style="left:0;">msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
        <li><img src="http://inncache.soso.com/pc/images/manage.jpg" width="610" height="205" alt="" title="" /></li>msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
        <li><img src="http://inncache.soso.com/pc/images/player.jpg" width="610" height="205" alt="" title="" /></li>msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
        <li><img src="http://inncache.soso.com/pc/images/py.jpg" width="610" height="205" alt="" title="" /></li>msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
        <li><img src="http://inncache.soso.com/pc/images/xf.jpg" width="610" height="205" alt="" title="" /></li>msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
        <li><img src="http://inncache.soso.com/pc/images/TT.jpg" width="610" height="205" alt="" title="" /></li>msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
    </ul>msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
    <ul id="icon_num">msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
     <li class="active">1</li>msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
        <li>2</li>msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
        <li>3</li>msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
        <li>4</li>msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
        <li>5</li>msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
    </ul>msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

哈哈 很简单吧!那接下来我们看下JS代码吧!注释写的很详细了,呵呵!msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

<script type="text/javascript">msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
/**msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 *glide.layerGlide((oEventCont,oSlider,sSingleSize,sec,fSpeed,point);msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 *@param auto type:bolean 是否自动滑动 当值是true的时候 为自动滑动msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 *@param oEventCont type:object 包含事件点击对象的容器msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 *@param oSlider type:object 滑动对象msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 *@param sSingleSize type:number 滑动对象里单个元素的尺寸(width或者height)  尺寸是有point 决定msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 *@param second type:number 自动滑动的延迟时间  单位/秒msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 *@param fSpeed type:float   速率 取值在0.05--1之间 当取值是1时  没有滑动效果msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 *@param point type:string   left or topmsu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 */msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
var glide =new function(){msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 function $id(id){return document.getElementById(id);};msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 this.layerGlide=function(auto,oEventCont,oSlider,sSingleSize,second,fSpeed,point){msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
  var oSubLi = $id(oEventCont).getElementsByTagName('li');msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
  var interval,timeout,oslideRange;msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
  var time=1; msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
  var speed = fSpeed msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
  var sum = oSubLi.length;msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
  var a=0;msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
  var delay=second * 1000; msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
  var setValLeft=function(s){msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   return function(){msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
    oslideRange = Math.abs(parseInt($id(oSlider).style[point])); msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
    $id(oSlider).style[point] =-Math.floor(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';  msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
    if(oslideRange==[(sSingleSize * s)]){msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
     clearInterval(interval);msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
     a=s;msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
    }msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   }msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
  };msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
  var setValRight=function(s){msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   return function(){   msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
    oslideRange = Math.abs(parseInt($id(oSlider).style[point]));       msu合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
    $id(oSlider).style[point] =-Math.ceil(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';

本文关键词
JS图片切换