锁定老帖子 主题:分享一个原创图片轮转效果
精华帖 (2) :: 良好帖 (3) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2010-05-12
浏览器支持情况是大家比较关心的。该控件支持包括ie6/7/8、FF、chrome和opera各个浏览器。 共支持5种效果,分别为:
调用的方法非常简单。共需要4步。 1、首先,你需要将以下代码复制到你的html文件中去。图片uri可自行替换。carouseltitle中的列表是切换的控件,所以图片和li的数目应当相等。 <div id="carousel"> <div id="carouselimg"> <div id="imgcontainer"> <a href="./"><img src="manage.jpg" /></a> <a href="./"><img src="player.jpg" /></a> <a href="./"><img src="TT.jpg" /></a> <a href="./"><img src="xf.jpg" /></a> <a href="./"><img src="py.jpg" /></a> </div> </div> <div id="carouseltitle"> <ul> <li> Ⅰ </li> <li> Ⅱ </li> <li> Ⅲ </li> <li> Ⅳ </li> <li> Ⅴ </li> </ul> </div> </div> 2、然后引入fr.carousel.css这个文件,其中包含了对外观的一般设定,你可以自行修改。 3、接着在html文件中引入js文件。为了适合不同的需求,除源文件外,压缩包内附带了min文件和pack文件。 4、最后在<script>标记中输入如下代码: FR.Carousel.start({ //效果模式,取值为1-5 mode:1, //步数 steps:20, //步长 period:25, //图片长 width:300, //图片高 height:200, //容器的背景色 bgColor:'#000000', //是否自动切换 autoSwitch:true, //若自动切换,每次切换的延迟 delay:5000 }); 现在你就拥有一个自己的图片走马灯了。 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-05-15
很好很强大,O(∩_∩)O~
|
|
返回顶楼 | |
发表时间:2010-05-15
不错,很好。不过要是能可以带有标题介绍就更好了
|
|
返回顶楼 | |
发表时间:2010-05-15
每次的切换效果不一样的话,能做不
|
|
返回顶楼 | |
发表时间:2010-05-16
还行!O(∩_∩)O~
蛮好的…… |
|
返回顶楼 | |
发表时间:2010-05-16
用flash实现的效果比这好多了,而且只要配置相应的XML文件,无须这样做吧。不过对于CSSS,JS的应用学习,还是非常不错的。
|
|
返回顶楼 | |
发表时间:2010-05-16
效果不错,运行起来很好。学习了
|
|
返回顶楼 | |
发表时间:2010-05-17
有意思.....
|
|
返回顶楼 | |
发表时间:2010-05-17
还真的不错哦
|
|
返回顶楼 | |
发表时间:2010-05-18
感觉不错,
但是鼠标移动快了,,反应就跟不上了。。 |
|
返回顶楼 | |