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

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



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

1. 交替切换；
2. 闪光切换；
3. 淡入淡出；
4. 纵向滚动；
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
});

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

评论

28 楼 gintama 2010-11-10  

顶了  很好的说

27 楼 TESZLX 2010-11-02  

so good!

26 楼 vb2005xu 2010-10-20  

其实IE本身自带的SMIL能够实现,firefox就可以使用通用的

25 楼 Alienzhy 2010-10-20  

我引用了一下淡入淡出的，怎么显示完一遍之后，就显示不出图片了啊

24 楼 Alienzhy 2010-10-20  

我喜欢你，真的

23 楼 manming 2010-06-23  

效果不错，研究一下楼主的JS

22 楼 zhc0822 2010-06-22  

Jantol 写道

学习下，想问下楼主，那三个js文件时怎么作用的

min文件是删减了空格、制表符和换行符的文件，主要目的是缩小网络传输量。pack文件适用于没有开启gzip的服务器。
三个js的作用是一样的，使用场景不一样而已。

21 楼 Jantol 2010-06-22  

学习下，想问下楼主，那三个js文件时怎么作用的

20 楼 zhc0822 2010-06-11  

nighthawk 写道

zhc0822 写道

nighthawk 写道

IE8下报错，FR.Typer为空或不是对象

在<script>标签中删除这一行即可。这是另外一个打字机的效果。发上来时忘记删了。抱歉。

非常感谢你的分享。我在页面试了试，还是有两个问题，麻烦给解答一下。
我在IE6下，滚动到第二张图片的时候，页面样式就错乱了。
IE8下，Ⅰ，Ⅱ，Ⅲ， Ⅳ 不显示了

您好，我在IE678浏览器下均测试过，且根据javaeye网友的反馈来看，应当运行正常。
现在已知的会引发错误的地方是：当选用横向滚动模式时，width必须能够整除steps；当选用纵向爬行模式时，height必须能够整除steps。否则会有样式错误。
您可以把截图发上来，我们共同探讨问题所在。

19 楼 marc0658 2010-06-09  

试用过了。很好很强大！

18 楼 nighthawk 2010-06-08  

zhc0822 写道

nighthawk 写道

IE8下报错，FR.Typer为空或不是对象

在<script>标签中删除这一行即可。这是另外一个打字机的效果。发上来时忘记删了。抱歉。

非常感谢你的分享。我在页面试了试，还是有两个问题，麻烦给解答一下。
我在IE6下，滚动到第二张图片的时候，页面样式就错乱了。
IE8下，Ⅰ，Ⅱ，Ⅲ， Ⅳ 不显示了

17 楼 zhc0822 2010-06-08  

nighthawk 写道

IE8下报错，FR.Typer为空或不是对象

在<script>标签中删除这一行即可。这是另外一个打字机的效果。发上来时忘记删了。抱歉。

16 楼 nighthawk 2010-06-08  

IE8下报错，FR.Typer为空或不是对象

15 楼 zhc0822 2010-06-03  

bavnnsym 写道

感觉不错，

但是鼠标移动快了，，反应就跟不上了。。

因为用户操作过快时，会出现几幅图片一起变换的问题，很不好看。bing主页、蓝色理想等一批网站都是类似的做法，限制用户过快地切换图片。

14 楼 zhc0822 2010-06-02  

flyingcai 写道

用flash实现的效果比这好多了，而且只要配置相应的XML文件，无须这样做吧。不过对于CSSS，JS的应用学习，还是非常不错的。

这个用起来其实也挺方便的。flash效果很好，但是吃内存、不利于SEO、无法优雅降级、对盲人也不友好（没见过能读出flash内容的屏幕阅读器）。

13 楼 zhc0822 2010-06-02  

ghyghoo8 写道

每次的切换效果不一样的话，能做不

这个理论上可以做，但是效果本非js所长，复杂的动画要求还是flash比较合适。

12 楼 學會☆～Snow 2010-06-01  

用意思，，就是鼠标控制有时快点就不行啦

11 楼 kingliang123 2010-05-19  

很好，学习下去。。。。我也学得去实现个。。。。

10 楼 ytsmtxxi 2010-05-19  

bavnnsym 写道

感觉不错，

但是鼠标移动快了，，反应就跟不上了。。

那是因为前一个还没有完全加载完。加载完了就不会了。如果能估到不用加载完也都可以切换的话，就perfect

9 楼 bavnnsym 2010-05-18  

感觉不错，

但是鼠标移动快了，，反应就跟不上了。。