一个简单的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({
-
- 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
});
现在你就拥有一个自己的图片走马灯了。
分享到:
相关推荐
javascript 实现图片轮转效果,效果页面可查看当当品牌店铺
用javascript的面向对象的方法写的一个图片轮转效果。里面还有诸多不足之处。
仿优酷视频的图片轮转效果
简单的图片轮转效果.很实用的!
使用html js css技术实现 图片轮转,在移动端图片的滑动效果
使用Jquery制作的图片轮转插件,源码
jquery实现图片轮转jquery实现图片轮转
FR图片轮转是javascript编写的图片轮转,出现图片轮动的效果!
超强JS图片轮转代码,跟arting365.com首页上一样的
利用JQuery-cycle做的图片轮转示例,可以选择多种特效
.net图片轮转,类似百度新闻html页的图片轮转。
JavaScript图片轮转JavaScript图片轮转JavaScript图片轮转JavaScript图片轮转JavaScript图片轮转JavaScript图片轮转JavaScript图片轮转JavaScript图片轮转JavaScript图片轮转JavaScript图片轮转JavaScript图片轮转
用快速原型工具AXURE制作的图片轮转效果,包括手动的和自动的两个版本。
自定义图片轮转 每一行加注释 更容易理解 操作简单使用 三分钟包会
方便的SharePoint站点图片轮转器,让你的SharePoint站点熠熠生辉。
图片轮转功能,适用于网站图片走马灯样式。
利用unity实现3d轮转图效果
图片轮转点击系列
各种大型网站上的新闻图片轮转和 看图轮转