文档章节

slider(js)扩展

0000001
 0000001
发布于 2014/11/17 22:23
字数 407
阅读 63
收藏 2

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


© 著作权归作者所有

0000001
粉丝 34
博文 141
码字总数 46256
作品 0
朝阳
前端工程师
私信 提问
2018 年 3 月 15 个有意思的 JavaScript 和 CSS 库

Tutorialzine 旨在让你了解最新最酷的 Web 发展趋势。这就是我们每个月为何都会发布一些我们偶然发现并认为值得你关注的优秀资源的原因。 BasicScroll 该库使你可以在你的设计中添加 parall...

oschina
2018/03/16
2.4K
2
轮播图的效果实现小米商城和京东商城

案例一: 效果如下:类似小米商城的轮播图 自动切换的:左右的 路径结构: 代码如下: 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

没有更多内容

加载失败,请刷新页面

加载更多

Qt编写自定义控件69-代码行数统计

一、前言 代码行数统计主要用来统计项目中的所有文件的代码行数,其中包括空行、注释行、代码行,可以指定过滤拓展名,比如只想统计.cpp的文件,也可以指定文件或者指定目录进行统计。写完这...

飞扬青云
16分钟前
3
0
驰骋工作流引擎-ccflow关于 “ 是否自动计算未来的处理人”的功能变更

关键字:流程未来节点处理人 工作流快速开发平台 工作流流设计 业务流程管理 asp.net 开源工作流 业务背景:一个流程在启动起来后,是可以对一些节点计算出来处理人是谁,流程的走向。对于另...

孟娟
32分钟前
4
0
IT兄弟连 HTML5教程 HTML5表单 HTML表单设计1

表单是PHP程序中最常使用的收集站点访问者信息的数据输入界面。通过表单浏览器获取用户的输入数据,并传送给Web服务器的脚本程序中,以各种不同的方式进行处理。在表单中提供了多种输入方式,...

老码农的一亩三分地
33分钟前
4
0
武者Vue

本文转载于:专业的前端网站➼武者Vue 1 - Introduction2 - The Vue Instance3 - Data & Methods4 - Data Binding5 - Events6 - Event Modifiers7 - Keyboard Events8 - Two-Way Data......

前端老手
39分钟前
6
0
uni app 零基础小白到项目实战

$emit 子组件传给父组件$ref 父组件操作子组件 公用模板 uni-app全局变量的几种实现方法 const websiteUrl = 'http'const now = Date.now || function() { return new Date().getTime......

达达前端小酒馆
49分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部