当前位置:首页 前端开发 正文
+2°

Mootools写的图片滚动切换效果的类

2012年08月05日 | 作者: 米豆网 - 1000seo | 分类: 前端开发 | 

最近学习mootools正好又有朋友网站需要图片切换的效果,所有就用mootools写了个简单的切换,功能待完善

Mootools写的图片滚动切换效果的类

 

调用方法:

引用:

mootools-1.2-core.js

mootools-1.2-more.js

ScrollPicture-min.js

<script language=”javascript” src=”mootools-1.2-core.js”></script>

<script language=”javascript” src=”mootools-1.2-more.js”></script>

<script language=”javascript” src=”ScrollPicture-min.js”></script>

var ppc=new ScrollPicture(imgsAry,w,h,duration,Interval,Container)

参数:

imgsAry:图像数组

w:图片的宽度

h:图片高度

duration:切换速度,值越大,切换速度越慢

Interval:切换间隔

Container:显示容器

Demo:

<div id=”cont”></div>

<script language=”javascript”>

var w=998;

var h=336;

var Switcher = new Array();

Switcher[0]= “tu1.jpg”

Switcher[1]= “tu2.jpg”

Switcher[2]= “tu3.jpg”

var ppc=new ScrollPicture(Switcher,w,h,’500′,’5000′,’cont’);

ppc.play();

</script>

 

Demo及源文件下载

本文章由 米豆网 - 1000seo 于2012年08月05日发布在前端开发分类下,您可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
+复制链接 转载请注明:Mootools写的图片滚动切换效果的类-米豆网
关键字:,

好文章就要一起分享!

更多

目前共有2条留言

  • Antonia Peca

    1楼
    2013 年 11 月 24 日 05:59:28 回复

    I establish thus a lot of exciting stuff in your blog specially its discussion. From the tons of comments by your articles, I guess I am not the only one having all the enjoyment here! keep positive the sunny work.

  • Margarita

    2楼
    2012 年 08 月 25 日 09:54:10 回复

    Yeah that’s what I’m talknig about baby–nice work!

发表评论

你的大名(必填)

你的邮箱(必填)

你的网站(选填)

评论内容(必填)

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif