合肥网站建设(LZ工作室)今天闲着无事,做了一款JS封装类的图片切换效果,先看下效果吧,效果图如下:
<div id="picBox">
<ul id="show_pic" style="left:0;">
<li><img src="http://inncache.soso.com/pc/images/manage.jpg" width="610" height="205" alt="" title="" /></li>
<li><img src="http://inncache.soso.com/pc/images/player.jpg" width="610" height="205" alt="" title="" /></li>
<li><img src="http://inncache.soso.com/pc/images/py.jpg" width="610" height="205" alt="" title="" /></li>
<li><img src="http://inncache.soso.com/pc/images/xf.jpg" width="610" height="205" alt="" title="" /></li>
<li><img src="http://inncache.soso.com/pc/images/TT.jpg" width="610" height="205" alt="" title="" /></li>
</ul>
<ul id="icon_num">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
哈哈 很简单吧!那接下来我们看下JS代码吧!注释写的很详细了,呵呵!
<script type="text/javascript">
/**
*glide.layerGlide((oEventCont,oSlider,sSingleSize,sec,fSpeed,point);
*@param auto type:bolean 是否自动滑动 当值是true的时候 为自动滑动
*@param oEventCont type:object 包含事件点击对象的容器
*@param oSlider type:object 滑动对象
*@param sSingleSize type:number 滑动对象里单个元素的尺寸(width或者height) 尺寸是有point 决定
*@param second type:number 自动滑动的延迟时间 单位/秒
*@param fSpeed type:float 速率 取值在0.05--1之间 当取值是1时 没有滑动效果
*@param point type:string left or top
*/
var glide =new function(){
function $id(id){return document.getElementById(id);};
this.layerGlide=function(auto,oEventCont,oSlider,sSingleSize,second,fSpeed,point){
var oSubLi = $id(oEventCont).getElementsByTagName('li');
var interval,timeout,oslideRange;
var time=1;
var speed = fSpeed
var sum = oSubLi.length;
var a=0;
var delay=second * 1000;
var setValLeft=function(s){
return function(){
oslideRange = Math.abs(parseInt($id(oSlider).style[point]));
$id(oSlider).style[point] =-Math.floor(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';
if(oslideRange==[(sSingleSize * s)]){
clearInterval(interval);
a=s;
}
}
};
var setValRight=function(s){
return function(){
oslideRange = Math.abs(parseInt($id(oSlider).style[point]));
$id(oSlider).style[point] =-Math.ceil(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';
免费电话咨询
18955177249