`
snoopy7713
  • 浏览: 1146868 次
  • 性别: Icon_minigender_2
  • 来自: 火星郊区
博客专栏
Group-logo
OSGi
浏览量:0
社区版块
存档分类
最新评论

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

 
阅读更多

一个简单的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
});



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

 

分享到:
评论

相关推荐

    javascript 实现图片轮转效果

    本文将详细讲解如何利用JavaScript技术来创建一个图片轮转效果,并结合当当品牌店铺的实际应用场景进行说明。 首先,我们需要理解图片轮转效果的基本原理。这种效果通常是指一组图片按照设定的时间间隔自动切换,给...

    简单的图片轮转效果

    5. **响应式设计**:考虑到不同设备的屏幕尺寸和分辨率,一个好的图片轮转效果应该具备响应式设计。这可以通过CSS的媒体查询(`@media`)来实现,根据设备屏幕大小调整图片的布局和大小。 6. **用户交互**:除了自动...

    图片轮转效果

    本项目利用JavaScript的面向对象编程思想实现了一个基本的图片轮转效果,虽然存在一些待改进的地方,但仍然能够为我们提供一个良好的学习起点。 首先,我们要理解JavaScript是一种在浏览器端运行的脚本语言,它能够...

    仿优酷视频的图片轮转效果

    仿优酷视频的图片轮转效果

    html实现图片轮转

    在本项目中,我们将探讨如何使用这三者来实现一个图片轮转的效果,尤其关注在移动端的滑动表现。 首先,HTML(HyperText Markup Language)是网页的基础,它定义了网页的内容和结构。在实现图片轮转时,我们需要...

    超强JS图片轮转代码

    4. **数据结构**:可能需要一个数组来存储图片的URL或对象,方便管理和操作。 5. **计时器管理**:合理使用setTimeout或setInterval,确保图片轮转不会过于频繁或卡顿,同时提供暂停和恢复功能。 6. **回调函数**...

    JQuery图片轮转插件

    JQuery,一个广泛使用的JavaScript库,简化了DOM操作、事件处理和动画效果的实现,使得创建这样的功能变得轻而易举。本知识点将深入探讨如何使用JQuery制作图片轮转插件,以及涉及的相关技术。 一、JQuery简介 ...

    FR图片轮转-javascript图片轮转

    "FR图片轮转"是基于JavaScript实现的一种图片轮转解决方案,它允许开发者轻松创建出具有动画效果的图片轮动组件。 1. **JavaScript图片轮转基础**: JavaScript,作为前端开发的重要语言,提供了丰富的功能来处理...

    用AXURE RP实现的图片轮转效果

    通过以上步骤,我们可以利用AXURE RP实现一个功能完备的图片轮转效果,无论是手动控制还是自动播放,都能为用户带来良好的视觉体验。对于IT从业者来说,掌握AXURE RP的这些技巧,无疑能够提高原型设计的效率和质量。

    图片轮转特效

    5. **自定义风格**:这可能是指一个CSS文件,用于定义图片轮转特效的样式,包括但不限于图片的大小、布局、边框、阴影、过渡动画效果等。用户可以根据自己的需求调整这个文件,以适应自己的网站设计。 在实现图片...

    图片轮转示例代码

    接下来,我们可以创建一个包含多张图片的元素,每张图片作为轮播的一个幻灯片。例如: ```html ``` 然后,在页面加载完成后,使用jQuery选择器找到该元素,并调用cycle方法来初始化轮播效果。可以设置不同...

    .net图片轮转

    在ASP.NET中,可以创建一个WebAPI接口,返回图片列表和当前显示的图片索引,前端通过AJAX请求获取并更新图片。 为了更具体地实现这一功能,你可以考虑以下几点: - 使用CSS样式控制图片布局,例如设置图片的绝对...

    SharePoint站点图片轮转器

    SharePoint站点图片轮转器是一种用于提升SharePoint网站视觉效果的工具,它允许用户在网站的指定区域展示一组图片,并...通过定制和集成,它可以成为一个强大的信息展示平台,帮助企业更好地传达品牌价值和关键信息。

    JS图片轮转

    总结起来,"JS图片轮转"是一个利用JavaScript实现的网页组件,它具有良好的封装性和独立性,允许用户通过点击数字进行交互,改变图片的显示。实现这个功能需要理解JS的基本语法,包括数组操作、事件处理、DOM操作等...

    viewpager 触摸暂停 图片轮转 自定义控件(修改)

    在本文中,我们将深入探讨如何实现一个自定义的`ViewPager`,使其具有触摸暂停和图片轮转功能。这非常适合用于创建广告轮播、图片展示等场景。 首先,我们来了解`ViewPager`的基本用法。`ViewPager`继承自` ...

    jquery 插件,轮转效果很棒的

    一个优秀的图片轮转插件不仅需要实现基本的图片切换功能,还应包含以下几个关键特性: 1. **动画效果**:动画效果是轮转插件的核心,它决定了图片切换时的流畅性和吸引力。常见的动画效果包括淡入淡出、滑动、缩放...

    图片相册无限轮转

    在实现无限轮转图片相册时,我们需要创建一个包含所有图片的容器,每个图片都被封装在一个单独的HTML元素(如`&lt;div&gt;`或`&lt;img&gt;`)中。这些元素通常是水平排列,通过CSS定位来实现横向滑动。例如,可以使用`display: ...

    用js实现图片轮转

    至此,一个简单的图片轮转效果就完成了。你可以根据实际需求增加功能,比如添加导航箭头、自动播放控制、图片缩放等。这个基础的实现提供了图片轮转的核心逻辑,开发者可以根据这个模板进行扩展,以满足更多复杂的...

    3D图片轮转墙

    "3D图片轮转墙"是一种利用Adobe Flash技术实现的互动视觉效果,它将多张图片以三维立体的方式展示,用户可以通过鼠标操作使图片在墙面上进行旋转,从而带来生动且富有动态感的浏览体验。这种效果在网页设计、产品...

    图片轮转有好几种自己可以选择

    在IT行业中,图片轮转是一种常见的网页动态效果,用于展示多张图片并自动进行切换,以吸引用户注意力或提供更多信息。这种技术广泛应用于新闻网站、电商网站、博客和其他需要展示多幅图片的在线平台。标题“图片轮转...

Global site tag (gtag.js) - Google Analytics