封装图片滑动效果

by bopooo

在腾讯QQ软件下载的页面有一个图片滑动的效果,觉得还不错 就自己封装了一个 技术方面在 动作缓冲上 遇到一些问题 不过都解决了 不过还是要谢谢 天空里的一片云给我提供的资料http://bbs.blueidea.com/thread-2961061-1-2.html 我大体上看了下 别人的思路 就自己动手做了 基本上是按照自己的想法来做的

考虑到很多朋友不太了解js 所以我封装的时候 把所有参数都集中到一个函数里 免得大家调用的时候还要看源代码 去设置参数根据提供不同的参数会有不同的效果 没有封装特别多的效果 需要的朋友可以自己动手改正自己想要的 废话多了 具体看效果

  1. 调用方法:glide.layerGlide(auto,oEventCont,oSlider,sSingleSize,second ,fSpeed,point);
  2. *glide.layerGlide(auto,oEventCont,oSlider,sSingleSize,second ,fSpeed,point);
  3. *@param auto type:bolean 是否自动滑动 当值是true的时候 为自动滑动
  4. *@param oEventCont type:object 包含事件点击对象的容器
  5. *@param oSlider type:object 滑动对象
  6. *@param sSingleSize type:number 滑动对象里单个元素的尺寸(width或者height) 尺寸是有point 决定
  7. *@param second type:number 自动滑动的延迟时间 单位/秒
  8. *@param fSpeed type:float 速率 取值在0.05--1之间 当取值是1时 没有滑动效果
  9. *@param point type:string left or top 当值为left 为横向滚动 为top是顺向滚动

横向滑动

<!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=utf-8" />

<title>picsGlide</title>

<style type="text/css">

body{ font-size:12px; color:#333;}

#picBox{width:610px; height:205px; margin:50px auto; overflow:hidden; position:relative;}

#picBox ul#show_pic{ margin:0; padding:0; list-style:none; height:205px; width:3050px; position:absolute;}

#picBox ul#show_pic li{ float:left; margin:0; padding:0; height:205px;}

#picBox ul#show_pic li img{ display:block;}

#icon_num{ position:absolute; bottom:0px; right:10px;}

#icon_num li{ float:left; background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat -15px 0;width:15px; height:15px; list-style:none; color:#39F; text-align:center; cursor:pointer; padding:0; margin:0;margin-right:5px;}

#icon_num li:hover,#icon_num li.active{ background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat 0 0; color:#fff;}

#picBox_top{width:610px; height:205px; margin:50px auto; position:relative; overflow:hidden;}

#picBox_top ul#show_pic_top{ margin:0; padding:0; list-style:none; height:205px; width:610px; position:absolute;}

#picBox_top ul#show_pic_top li{ float:left; margin:0; padding:0; height:205px;}

#picBox_top ul#show_pic_top li img{ display:block;}

#icon_num_top{ position:absolute; bottom:0px; right:10px;}

#icon_num_top li{ float:left; background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat -15px 0;width:15px; height:15px; list-style:none; color:#39F; text-align:center; cursor:pointer; padding:0; margin:0;margin-right:5px;}

#icon_num_top li:hover,#icon_num_top li.active{ background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat 0 0; color:#fff;}

</style>

</head>

<body>

<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>

<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';

if(oslideRange==[(sSingleSize * s)]){

clearInterval(interval);

a=s;

}

}

}

function autoGlide(){

for(var c=0;c<sum;c++){oSubLi[c].className='';};

clearTimeout(interval);

if(a==(parseInt(sum)-1)){

for(var c=0;c<sum;c++){oSubLi[c].className='';};

a=0;

oSubLi[a].className="active";

interval = setInterval(setValLeft(a),time);

timeout = setTimeout(autoGlide,delay);

}else{

a++;

oSubLi[a].className="active";

interval = setInterval(setValRight(a),time);

timeout = setTimeout(autoGlide,delay);

}

}

if(auto){timeout = setTimeout(autoGlide,delay);};

for(var i=0;i<sum;i++){

oSubLi[i].onmouseover = (function(i){

return function(){

for(var c=0;c<sum;c++){oSubLi[c].className='';};

clearTimeout(timeout);

clearInterval(interval);

oSubLi[i].className="active";

if(Math.abs(parseInt($id(oSlider).style[point]))>[(sSingleSize * i)]){

interval = setInterval(setValLeft(i),time);

this.onmouseout=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};

}else if(Math.abs(parseInt($id(oSlider).style[point]))<[(sSingleSize * i)]){

interval = setInterval(setValRight(i),time);

this.onmouseout=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};

}

}

})(i)

}

}

}

glide.layerGlide(true,'icon_num','show_pic',610,2,0.1,'left');

</script>

</body>

</html>

提示:你可以先修改部分代码再运行。

竖向滑动

<!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=utf-8" />

<title>picsGlide</title>

<style type="text/css">

body{ font-size:12px; color:#333;}

#picBox{width:610px; height:205px; margin:50px auto; overflow:hidden; position:relative;}

#picBox ul#show_pic{ margin:0; padding:0; list-style:none; height:205px; width:3050px; position:absolute;}

#picBox ul#show_pic li{ float:left; margin:0; padding:0; height:205px;}

#picBox ul#show_pic li img{ display:block;}

#icon_num{ position:absolute; bottom:0px; right:10px;}

#icon_num li{ float:left; background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat -15px 0;width:15px; height:15px; list-style:none; color:#39F; text-align:center; cursor:pointer; padding:0; margin:0;margin-right:5px;}

#icon_num li:hover,#icon_num li.active{ background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat 0 0; color:#fff;}

#picBox_top{width:610px; height:205px; margin:50px auto; position:relative; overflow:hidden;}

#picBox_top ul#show_pic_top{ margin:0; padding:0; list-style:none; height:205px; width:610px; position:absolute;}

#picBox_top ul#show_pic_top li{ float:left; margin:0; padding:0; height:205px;}

#picBox_top ul#show_pic_top li img{ display:block;}

#icon_num_top{ position:absolute; bottom:0px; right:10px;}

#icon_num_top li{ float:left; background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat -15px 0;width:15px; height:15px; list-style:none; color:#39F; text-align:center; cursor:pointer; padding:0; margin:0;margin-right:5px;}

#icon_num_top li:hover,#icon_num_top li.active{ background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat 0 0; color:#fff;}

</style>

</head>

<body>

<div id="picBox_top">

<ul id="show_pic_top" style="top: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_top">

<li class="active">1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

</div>

<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';

if(oslideRange==[(sSingleSize * s)]){

clearInterval(interval);

a=s;

}

}

}

function autoGlide(){

for(var c=0;c<sum;c++){oSubLi[c].className='';};

clearTimeout(interval);

if(a==(parseInt(sum)-1)){

for(var c=0;c<sum;c++){oSubLi[c].className='';};

a=0;

oSubLi[a].className="active";

interval = setInterval(setValLeft(a),time);

timeout = setTimeout(autoGlide,delay);

}else{

a++;

oSubLi[a].className="active";

interval = setInterval(setValRight(a),time);

timeout = setTimeout(autoGlide,delay);

}

}

if(auto){timeout = setTimeout(autoGlide,delay);};

for(var i=0;i<sum;i++){

oSubLi[i].onmouseover = (function(i){

return function(){

for(var c=0;c<sum;c++){oSubLi[c].className='';};

clearTimeout(timeout);

clearInterval(interval);

oSubLi[i].className="active";

if(Math.abs(parseInt($id(oSlider).style[point]))>[(sSingleSize * i)]){

interval = setInterval(setValLeft(i),time);

this.onmouseout=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};

}else if(Math.abs(parseInt($id(oSlider).style[point]))<[(sSingleSize * i)]){

interval = setInterval(setValRight(i),time);

this.onmouseout=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};

}

}

})(i)

}

}

}

glide.layerGlide(true,'icon_num_top','show_pic_top',205,2,0.1,'top');

</script>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

Python实现一个带图形界面的爬虫

Python 是一个很简介高效的语言,许多的 Python 爱好者(包括我在内)都很喜欢用 Python 做爬虫,为什么会喜欢写爬虫,我对爬虫的感觉就是:它能给...

3755
来自专栏前端小作坊

CSS vs JS动画:谁更快?

Javascript 动画怎么可能总是和 CSS transition 一样快,甚至更快呢?到底是什么秘密呢?Adobe 和 Google 是怎么做到让他们的富...

992
来自专栏极乐技术社区

小游戏入门

1145
来自专栏IMWeb前端团队

jQuery中的简单动画

本文作者:IMWeb 一大碗油茶 原文出处:IMWeb社区 未经同意,禁止转载 hide(time)将元素的display变为none,可以设置时间,...

1745
来自专栏北京马哥教育

爬虫实践---一次下完所有小说:排行榜小说批量下载

? 一、目标 排行榜的地址: http://www.qu.la/paihangbang/ 找到各类排行旁的的每一部小说的名字,和在该网站的链接。 二、...

2675
来自专栏JarvanMo的IT专栏

Dart In Action -Dart快速入门(-)

本文基本上是将dart官网部分内容进行翻译,没兴趣的请出门左转至Dart的官网,有兴趣的同志请继续阅读本文。 Flutter教程在这里

692
来自专栏老秦求学

比较字符串(忽略空格,忽略大小写)

总时间限制: 1000ms内存限制: 65536kB描述 判断两个由大小写字母和空格组成的字符串在忽略大小写,且忽略空格后是否相等。 输入两行,每行包含一个字符...

42710
来自专栏Crossin的编程教室

【我问 Crossin】英语不好能不能学编程?

“我问 Crossin” 栏目会整理一些读者经常会问到的问题,统一作答。有比较具体的编程细节,也会有一些方向的建议,以及学习经验、编程小技巧的分享。 大家有想问...

3209
来自专栏web前端教室

【0827】web零基础课-周总结(0827-0903)

- 在产品导航栏部分再次熟悉了弹出导航的设置。(position+display)

733
来自专栏进击的君君的前端之路

什么是CSS预处理器

1002

扫码关注云+社区