分享一个原创图片轮转成效
分享一个原创图片轮转效果
一个简单的JavaScript图片轮转效果。先上图(盗用了QQ的图)。
浏览器支持情况是大家比较关心的。该控件支持包括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>
<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
- });
FR.Carousel.start({ //效果模式,取值为1-5 mode:1, //步数 steps:20, //步长 period:25, //图片长 width:300, //图片高 height:200, //容器的背景色 bgColor:'#000000', //是否自动切换 autoSwitch:true, //若自动切换,每次切换的延迟 delay:5000 });
现在你就拥有一个自己的图片走马灯了。