封装图片滑动效果

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 条评论
登录 后参与评论

相关文章

来自专栏黒之染开发日记

css3动画在手机端的流畅度比较

我发现即使都是用css3的transition做动画,有的属性在动画播放时却会不流畅,出现定格动画的效果,这里做个比较,方便我以后做动画。

2532
来自专栏程序员互动联盟

【专业技术】CSS作用及用法

层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的...

3477
来自专栏小巫技术博客

A013-animator资源

753
来自专栏向治洪

微信小程序基本组件概述

为了更好的理解微信小程序,本文90%文字描述来源于官网的介绍。官网原链接https://mp.weixin.qq.com/debug/wxadoc/dev/co...

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

CSS常见样式(二)

1252
来自专栏web

慕课网javascript 进阶篇 第九章 编程练习

1264
来自专栏Pythonista

css基础

    行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

1062
来自专栏木子昭的博客

<自动化办公> Python 操控 Word

虽然Word不好用, 但还必须得用它, python-docx是专门用于编辑Word文档的一个工具库, 它有两大用途, 自动化生成word文档 and 自动化...

1.4K7
来自专栏大数据钻研

HTML5新增及移除的元素

HTML经过10多年的发展,其元素经历了废弃与不断重新定义的过程。为了更好的处理现在的互联网应用,HTML5新增了图形绘制、多媒体播放、页面结构、应用程序存储、...

2708
来自专栏前端布道

CSS技巧和经验

1. 如何清除图片下方出现几像素的空白间隙 方法1 img { display: block; } 方法2 img { ...

3627

扫码关注云+社区