文档章节

slider(js)扩展

0000001
 0000001
发布于 2014/11/17 22:22
字数 407
阅读 272
收藏 0

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>Slider图片轮播</title>

<style type="text/css">

*{margin:0;padding:0}

ul,li{list-style:none}

#slider{ position:relative;width:470px; height:150px; overflow:hidden;}

#img{ overflow:hidden;}

#img li{ float:left;width:468px; height:150px; }

#nav{ position:absolute; bottom:5px; right:5px;}

#nav li.nav{background:#ffb442;}

#nav li{border:1px solid #f47500; color:#d94b01; background:#fff;font-size:12px; height:15px;width:15px;float:left;margin-left:4px;display:inline;text-align:center}


</style>

<script type="text/javascript"><!--

var Hongru = {}, H$ = function(id){return document.getElementById(id)}, H$$ = function(c,p){return p.getElementsByTagName(c)}

Hongru.slider = function(){

return{

init:function(id,options){

var ul = this.u = H$$('ul',H$(id))[0], li = H$$('li',ul); this.l=li.length; this.index = 0;

if(options.navId&&options.curClass){this.nav = H$$('li',H$(options.navId)), this.c = options.curClass;}

this.a=options.auto||0; this.v=options.vertical||0;H$(id).style.overflow = 'hidden';H$(id).style.position = 'relative';ul.style.position='absolute';

if(this.v){ul.style.top=0; this.h=options.height||li[0].offsetHeight; ul.style.height=(this.l*this.h)+'px';}

else{ul.style.left=0; this.w=options.width||li[0].offsetWidth; ul.style.width=(this.l*this.w)+'px';}

this.pos(options.index||0,this.a?1:0);

},

pos:function(pos,a){

clearInterval(this.u.posAnim); clearInterval(this.u.auto);

var curPos=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left),

correctPos=this.v?pos*this.h:pos*this.w, 

direction = correctPos>Math.abs(curPos)?1:-1;

correctPos*=-1; 

this.index = pos;

if(this.nav){for(var i=0;i<this.l;i++){this.nav[i].className = i==pos?this.c:''}}

this.u.posAnim = setInterval(function(){Hongru.slider.anim(correctPos,direction,a)},10);

},

anim:function(des,dir,a){

var curPos=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left);

if(curPos == des){

clearInterval(this.u.posAnim);

if(a||this.a){Hongru.slider.auto()}

}

else{

var v=curPos-Math.ceil(Math.abs(des-curPos)*.07)*dir+'px';

this.v?this.u.style.top=v:this.u.style.left=v;

}

},

auto:function(){

this.u.auto=setInterval(function(){Hongru.slider.move(1,1)},this.a*1000)

},

move:function(n,a){

var num=this.index+n, i=n==1?num==this.l?0:num:num<0?this.l-1:num; Hongru.slider.pos(i,a);

}

};

}();

// --></script>

</head>

<body>

<div id="slider">

<ul id="img">

<li><img alt="" src="http://images.cnblogs.com/cnblogs_com/hongru/262693/o_1.jpg"  /></li>

<li><img alt="" src="http://images.cnblogs.com/cnblogs_com/hongru/262693/o_2.jpg"  /></li>

<li><img alt="" src="http://images.cnblogs.com/cnblogs_com/hongru/262693/o_3.jpg" /></li>

</ul>

<ul id="nav">

<li onmouseover="setTimeout(function(){Hongru.slider.pos(0)},300)">1</li>

<li onmouseover="setTimeout(function(){Hongru.slider.pos(1)},300)">2</li>

<li onmouseover="setTimeout(function(){Hongru.slider.pos(2)},300)">3</li>

</ul>

</div>

<script type="text/javascript">

Hongru.slider.init('slider',{

auto:3,

vertical:1,

navId:'nav',

curClass:'nav',

index:0});

</script>

</body>

</html>


© 著作权归作者所有

上一篇: slider(js)扩展
下一篇: win7下安装nodejs
0000001
粉丝 34
博文 141
码字总数 46256
作品 0
朝阳
前端工程师
私信 提问
轮播图的效果实现小米商城和京东商城

案例一: 效果如下:类似小米商城的轮播图 自动切换的:左右的 路径结构: 代码如下: Title

tty之星
2018/07/20
0
0
Web设计与开发终极资源大全(上)

Web 技术突飞猛进,Web 设计与开发者们可以选择的工具越来越多,Web 开发者的技巧不再只限于 HTML 和 服务器端编程,还需要精通各种第三方资源,这些第三方资源有时候比你的项目更复杂,更专...

红薯
2010/03/18
1K
3
12 月份 10 个新鲜的 jQuery 插件和教程

1. MASHA (Mark & Share) MASHA (Mark & Share 的缩写) 是一个可以让你分享网页部分内容的 JavaScript 库。 2. JScraft scroller 通过点击某个图片,该图将移到网页中央,其他相应的图片进行...

红薯
2011/12/30
3.2K
6
DiQuick Web UI 框架 V1.3.2 版本更新

DiQuick Web UI 框架,采用 HTML+CSS3+原生 JS,配置有响应式布局及预定义设置,包含诸多组件:Nav、Tab、Media、Form、Menu、Slider、Dialog 等,致力于开发轻量化、语义化、扩展性强的 We...

WithoutD
03/25
1K
5
Kids Store - OpenCart 自适应主题模板 ABC-0022

KIDS STORE - OPENCART 自适应主题模板 ABC-0022 FEATURES Get FREE Lifetime Updates Get FREE On-Going Support HTML5 and CSS3 Fully RESPONSIVE Theme Using Google Fonts Support Multi......

OpenCart中国
2015/07/03
30
0

没有更多内容

加载失败,请刷新页面

加载更多

使用TensorFlow的AI程序运行报错AttributeError: module 'tensorflow' has no attribute 'xxx'

使用TensorFlow的AI程序,在运行时报错AttributeError: module 'tensorflow' has no attribute 'xxx',首先检查是否是包路径不对,一般是版本变化所致。...

织梦之魂
44分钟前
3
0
提示浏览器版本低

本文转载于:专业的前端网站➭提示浏览器版本低 网站网页在遇到浏览器低版本(尤其是IE浏览器)时,提示浏览器版本低(如IE8以及以下),建议用户升级浏览器以获得最好体验。以下是代码: 1...

前端老手
45分钟前
6
0
CentOS 7系统增加swap

转载请注明文章出处:CentOS 7系统增加swap swap是位于磁盘上的特殊文件(或分区),属于“虚拟内存”的一部分。通俗点就是内存的备胎,内存充足的情况下,基本上没swap什么事(和设置有关)...

tlanyan
今天
6
0
基于Prometheus和Grafana的监控平台 - 环境搭建

相关概念 微服务中的监控分根据作用领域分为三大类,Logging,Tracing,Metrics。 Logging - 用于记录离散的事件。例如,应用程序的调试信息或错误信息。它是我们诊断问题的依据。比如我们说...

JAVA日知录
今天
6
0
PHP运行时全局构造体

struct _php_core_globals { zend_bool magic_quotes_gpc; // 是否对输入的GET/POST/Cookie数据使用自动字符串转义。 zend_bool magic_quotes_runtime; //是否对运行时从外部资源产生的数据使...

冻结not
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部