封装图片滑动效果

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

相关文章

来自专栏九彩拼盘的叨叨叨

优化网站用户体验的tip

兼容性:Firfox6+, Safari5.1+,IE 10+。chrome不支持

672
来自专栏大数据钻研

CSS入门笔记 - 初识CSS

引言 上次给大家带来了html部分的笔记,大家的反馈让我非常开心?。 这次给大家带来css部分的第一篇笔记,由于本人比较蠢,学的很慢,而且css部分内容非常的细...

3576
来自专栏Danny的专栏

【MyEclipse】——MyEclipse设置注释模板

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

943
来自专栏老马寒门IT

01-老马jQuery教程-jQuery入口函数及选择器

这套jQuery教程是老马专门为寒门子弟而录制,希望大家看到后能转发给更多的寒门子弟。视频都是免费,请参考课程地址:https://chuanke.baidu....

2050
来自专栏HTML5学堂

2016.04第4周 群问题分享

HTML+CSS img图片下面产生3px间隙问题 2016.4.25~2016.4.29 核心概念 行元素垂直方向的对齐方式和行块元素转换 参考答案 方法一:...

34214
来自专栏抠抠空间

JavaScript之DOM

一、什么是DOM? DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。 DOM(Docum...

2705
来自专栏Python爬虫与数据挖掘

Python正则表达式初识(一)

首先跟大家简单唠叨两句为什么要学习正则表达式,为什么在网络爬虫的时候离不开正则表达式。正则表达式在处理字符串的时候扮演着非常重要的角色,在网络爬虫的时候...

973
来自专栏Java成神之路

Java之 将程序打包成jar包

   2.指定目录:建一个目录,来存放.class文件和.jar文件。 本文指定目录为 E:\myclass 。

853
来自专栏向治洪

React Native之react-native-scrollable-tab-view详解

在React Native开发中,官方为我们提供的Tab控制器有两种:TabBarIOS和ViewPagerAndroid。TabBarIOS,仅适用于IOS平...

5836
来自专栏我的博客

安卓开发之事件

事件处理:提供为用户动作响应的机制 Android提供两种方式的事件处理 一、基于回调的事件处理 二、基于监听的事件处理 事件监听处理模型中三类对象: 事件源:...

1855

扫码关注云+社区