分享一个原创图片轮转成效

一个简单的JavaScript图片轮转效果。先上图（盗用了QQ的图）。



浏览器支持情况是大家比较关心的。该控件支持包括ie6/7/8、FF、chrome和opera各个浏览器。
共支持5种效果，分别为：

1. 交替切换；
2. 闪光切换；
3. 淡入淡出；
4. 纵向滚动；
5. 横向爬行。

调用的方法非常简单。共需要4步。
1、首先，你需要将以下代码复制到你的html文件中去。图片uri可自行替换。carouseltitle中的列表是切换的控件，所以图片和li的数目应当相等。

Html代码 ?

1. <div?id="carousel">??
2. ????<div?id="carouselimg">??
3. ????????<div?id="imgcontainer">??
4. ????????????<a?href="./"><img?src="manage.jpg"?/></a>??
5. ????????????<a?href="./"><img?src="player.jpg"?/></a>??
6. ????????????<a?href="./"><img?src="TT.jpg"?/></a>??
7. ????????????<a?href="./"><img?src="xf.jpg"?/></a>??
8. ????????????<a?href="./"><img?src="py.jpg"?/></a>??
9. ????????</div>??
10. ????</div>??
11. ????<div?id="carouseltitle">??
12. ????????<ul>??
13. ????????????<li>??
14. ????????????????Ⅰ ??
15. ????????????</li>??
16. ????????????<li>??
17. ????????????????Ⅱ ??
18. ????????????</li>??
19. ????????????<li>??
20. ????????????????Ⅲ ??
21. ????????????</li>??
22. ????????????<li>??
23. ????????????????Ⅳ ??
24. ????????????</li>??
25. ????????????<li>??
26. ????????????????Ⅴ ??
27. ????????????</li>??
28. ????????</ul>??
29. ????</div>??
30. </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>标记中输入如下代码：

Js代码 ?

1. FR.Carousel.start({ ??
2. ????????//效果模式，取值为1-5 ??
3. ????mode:1, ??
4. ????????//步数 ??
5. ????steps:20, ??
6. ????????//步长 ??
7. ????period:25, ??
8. ????????//图片长 ??
9. ????width:300, ??
10. ????????//图片高 ??
11. ????height:200, ??
12. ????????//容器的背景色 ??
13. ????bgColor:'#000000', ??
14. ????????//是否自动切换 ??
15. ????autoSwitch:true, ??
16. ????????//若自动切换，每次切换的延迟 ??
17. ????delay:5000 ??
18. });??

FR.Carousel.start({
        //效果模式，取值为1-5
	mode:1,
        //步数
	steps:20,
        //步长
	period:25,
        //图片长
	width:300,
        //图片高
	height:200,
        //容器的背景色
	bgColor:'#000000',
        //是否自动切换
	autoSwitch:true,
        //若自动切换，每次切换的延迟
	delay:5000
});

现在你就拥有一个自己的图片走马灯了。

?