javascript图片切换

标签: javascript 图片 切换 | 发表时间:2011-08-15 12:12 | 作者:小诺N Haipeng
出处:http://www.cnblogs.com/

闲来无事,练习js,参照网上的一些源码写了一个图片切换程序,刚来博客园,不懂怎么发布js程序,懂的朋友可以留言告之。以下以图片解释。

大致功能如下:

1.图片切换效果有以下几种:随机切换   4格纵向百叶窗  16格横向百叶窗  由里至外逐渐放大   中间向左右两边逐渐放大   中间向上下两边逐渐放大   由上至下落幕   由左至右   由左上至右下   由右下至左上              8格纵向百叶窗    8格纵向百叶窗2   8格万花筒  24格万花筒  4格滑行左上至右下  4格滑行左上至右下  4格滑行落幕   4格滑行延伸。

图示为八格万花筒效果:

2.支持的导航方式有以下几种:

  2.1:数字导航

  

     2.2:图片内部导航:

     

      2.3:图片底部导航

     

     2.4: 左部图片导航

     

     2.5: 右部图片导航

     

     2.6: 无导航

使用方法:

  使用方法力求简单,只需要在head标签中添加

     

window.onload=function(){
				new imgSwitch("imgContainer",{Type:15,Width:874,Height:211,Pause:3000,Speed:"fast",Auto:true,Navigate:"picture",PicturePosition:"right"})	
	}

  参数说明:

     Type:图片切换的方式,目前有0-17,

0: 随机切换

1: 4格纵向百叶窗

2: 16格横向百叶窗

3: 由里至外逐渐放大

4: 中间向左右两边逐渐放大

5: 中间向上下两边逐渐放大

6: 由上至下落幕

7: 由左至右

8: 由左上至右下

9: 由右下至左上

10: 8格纵向百叶窗

11: 8格纵向百叶窗2

12: 8格万花筒

13: 24格万花筒

14: 4格滑行左上至右下

15: 4格滑行左上至右下

16: 4格滑行落幕

17: 4格滑行延伸。

     Width:图片的宽度(这个有点小bug,回头改正,修改长高时style.css里面imgContainer也请修改一下)

     Height:图片的高度

     Pause:图片停留的时间

     Speed:图片切换的时间,有三种方式,fast,normal,slow,也可以自定义时间,如:"200",单位是毫秒。默认为normal

     Auto:true或者false,是否自动播放

     Navigate:导航方式,目前有三种,"no"代表无导航,"numberic"代表数字导航,"picture"代表图片导航

     NavigatePlace:导航所在地方。"inner"代表在内部,"outer"代表在外部

     PicturePosition:在Navigate为picture的情况下,有三种方式:"bottom"导航图片在底部 "left"导航图片在左部 "right"导航图片在右部

原理说明

     主要是利用div的position的left,top属性来将图片分为几部分:如

<div style="width: 235px; height: 177px; background-image: url(file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/%E4%BB%A3%E7%A0%81/imgSwitch/images/3.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; clip: rect(0px 235px 177px 0px); background-position: 0px -177px; background-repeat: initial initial; "></div>

  主要的属性有: clip background-position width height background-image

大致顺序为:如果图片要弄成八部,则将长高除以八得到一个div的长高,如width: 235px; height: 177px;然后用bgimage和b-p来确定背景图片:background-position: 0px -177px;

background-image: url(file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/%E4%BB%A3%E7%A0%81/imgSwitch/images/3.jpg);

最后用js来控制clip属性,如 clip: rect(0px 235px 177px 0px);

测试事例完整源代码


作者: 小诺N 发表于 2011-08-15 12:12 原文链接

评论: 17 查看评论 发表评论


最新新闻:
· 李开复:谷歌收购摩托意在专利(2011-08-15 21:52)
· 调查显示79.2%网友看好谷歌收购摩托罗拉移动(2011-08-15 21:49)
· 谷歌高管解读收购事宜:摩托罗拉将独立运营(2011-08-15 21:43)
· 杨兴平:谷歌收购摩托罗拉会走向封闭(2011-08-15 21:13)
· 再见,摩托罗拉(2011-08-15 21:12)

编辑推荐:谷歌125亿美元收购摩托罗拉移动

网站导航:博客园首页  我的园子  新闻  闪存  小组  博问  知识库

相关 [javascript 图片 切换] 推荐:

javascript图片切换

- Haipeng - 博客园-首页原创精华区
闲来无事,练习js,参照网上的一些源码写了一个图片切换程序,刚来博客园,不懂怎么发布js程序,懂的朋友可以留言告之. 1.图片切换效果有以下几种:随机切换   4格纵向百叶窗  16格横向百叶窗  由里至外逐渐放大   中间向左右两边逐渐放大   中间向上下两边逐渐放大   由上至下落幕   由左至右   由左上至右下   由右下至左上              8格纵向百叶窗    8格纵向百叶窗2   8格万花筒  24格万花筒  4格滑行左上至右下  4格滑行左上至右下  4格滑行落幕   4格滑行延伸.

用javascript预加载图片、css、js的方法研究

- - 博客园_Ruby's Louvre
预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片、css、js这些静态文件可以被缓存),如果用户访问的页面里面的 css、js、图片被预加载了,用户打开页面的速度会快很多,提升用户体验. 在用到一些大图片展示的时候,预加载大图是很不错的方法,图片更快的被呈现给用户. 不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果.

JavaScript图片预加载应该注意的几点

- - 可咔酷 | 网络杂货铺
下面的代码是前段时间无聊的时候在论坛闲逛看到的一篇关于图片预加载的文章,其实写的不错,代码如下:. 在网上搜索了一下相关文章,大体上都是这个思路. 这个方法功能是ok的,但是有一些隐患. 1 创建了一个临时匿名函数来作为图片的onload事件处理函数,形成了闭包. 相信大家都看到过ie下的内存泄漏模式的文章,其中有一个模式就是循环引用,而闭包就有保存外部运行环境的能力(依赖于作用域链的实现),所以img.onload这个函数内部又保存了对img的引用,这样就形成了循环引用,导致内存泄漏.

用JavaScript将Canvas内容转化成图片的方法

- - WebHek
上周我们花了半天时间开发下一个准备放进Mozilla Marketplace的应用. 有一个应用现在非常的火热,那就是Instagram,Facebook花了100万美元收购了它. 我们也想有100万美元装到口袋里,我决定开发一个Instagram风格的应用,这篇文章了我将介绍一下如何将一张图片拷贝到canvas里,以及反过来,如何将画布内容保存成图片格式.

如何用JavaScript获取图片的真实尺寸大小

- - Web骇客
网页页面上的图片尺寸似乎都千篇一律. 我们最常见到的带有多图的文章页面中,图的大小通常是和页面的宽度一致,这样看起来,页面就是一个直筒形,这样的布局看多了就会觉得很单调. 之所以形成这样的局面,我想很大程度上是因为老式浏览器的限制. 但随着现代浏览器(火狐/谷歌/IE11)的普及,浏览器对页面设计的限制越来越少,Web程序员的想象能力能够得到极大的发挥.

【精心推荐】10款非常时尚的 jQuery 图片切换插件

- - 博客园_首页
  这篇文章向大家推荐几款非常漂亮的. jQuery 图片切换效果插件. jQuery 是最流行和使用最广泛的. JavaScript 框架,它简化了 HTML 文档遍历,事件处理,动画以及 Ajax 交互,帮助 Web 开发人员更快速的实现各种精美的界面交互效果.   其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片切换效果.

Javascript诞生记

- Milido - 阮一峰的网络日志
二周前,我谈了一点Javascript的历史. 今天把这部分补全,从历史的角度,说明Javascript到底是如何设计出来的. 只有了解这段历史,才能明白Javascript为什么是现在的样子. 我依据的资料,主要是Brendan Eich的自述. "1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.

JavaScript,你懂的

- dylan - keakon的涂鸦馆
经常有人问我,JavaScript应该怎么学. 先学基本语法,如果曾学过C等语言,应该1小时内就能掌握了. 再去使用内置的函数、方法和DOM API,熟悉它能干什么;而在学习DOM API的过程中,你还不得不与HTML和CSS打交道. 然后弄懂匿名函数和闭包,学会至少一个常用的JavaScript库(例如jQuery).

Javascript 里跑Linux

- rockmaple - Shellex&#39;s Blog
牛逼到暴的大拿 Fabrice Bellard,用Javascript实现了一个x86 PC 模拟器,然后成功在这个模拟器里面跑Linux(请用Firefox 4 / Google Chrome 11打开,Chome 12有BUG). 关于这个东西… 伊说 “I did it for fun“,大大啊大大啊….

高效 JavaScript

- xtps - ITeye论坛最新讨论
传统上,网页中不会有大量的脚本,至少脚本很少会影响网页的性能. 但随着网页越来越像 Web 应用程序,脚本的效率对网页性能影响越来越大. 而且使用 Web 技术开发的应用程序现在越来越多,因此提高脚本的性能变得很重要. 对于桌面应用程序,通常使用编译器将源代码转换为二进制程序. 编译器可以花费大量时间优化最终二进制程序的效率.