论坛首页 Web前端技术论坛

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

浏览 19935 次
精华帖 (2) :: 良好帖 (3) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-05-12  
一个简单的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
});


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


  • 大小: 180.4 KB
  • 大小: 4.9 KB
   发表时间:2010-05-15  
很好很强大,O(∩_∩)O~
0 请登录后投票
   发表时间:2010-05-15  
不错,很好。不过要是能可以带有标题介绍就更好了
0 请登录后投票
   发表时间:2010-05-15  
每次的切换效果不一样的话,能做不
0 请登录后投票
   发表时间:2010-05-16  
还行!O(∩_∩)O~
蛮好的……
0 请登录后投票
   发表时间:2010-05-16  
用flash实现的效果比这好多了,而且只要配置相应的XML文件,无须这样做吧。不过对于CSSS,JS的应用学习,还是非常不错的。
0 请登录后投票
   发表时间:2010-05-16  
效果不错,运行起来很好。学习了
0 请登录后投票
   发表时间:2010-05-17  
有意思.....
0 请登录后投票
   发表时间:2010-05-17  
还真的不错哦
0 请登录后投票
   发表时间:2010-05-18  
感觉不错,

但是鼠标移动快了,,反应就跟不上了。。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics