`

jQuery插件--图片轮换

阅读更多

今天利用jQuery实现了一个图片轮换插件,支持样式配置,支持弹出浮层查看单个图片

单击数字链接更换图片,鼠标停留到上面图片上暂停自动轮换

 

看看效果:

 

图1:默认配置时的效果

 图2:默认配置时的效果


 图3:单击图片,可以弹出浮层查看图片


 

 

配置项说明:

 

var options = {
                                //宽度
		'width':400,
		//高度
		'height':250,
		//背景颜色
		'backgroundColor':'#CCCCFF',
		//边框宽度
		'borderWidth':5,
		//边框颜色
		'borderColor':'black',
		//边框样式
		'borderStyle':'solid',
		//图片轮换速度
		'speed':'3s',
		//图片淡出速度
		'fadeOutSpeed':300,
		//图片淡入速度
		'fadeInSpeed':200,
		//图片队列的背景颜色
		'queueBackgroundColor':'black',
		//图片队列高度
		'queueHeight':25,
		//图片队列的透明渐变的样式 ,具体请参考CSS滤镜渐变样式说明
		'queueStyle':1,
		//图片队列的开始透明度
		'queueOpacity':30,
		//图片队列的结束透明度,当queueStyle!=0的情况下用到
		'queueFinishOpacity':80,
		//图片队列标题的字体颜色
		'queueTitleColor':'red',
		//图片队列标题的字体大小
		'queueTitleFontSize':'16px',
		//图片队列标题的字体粗细
		'queueTitleFontWeight':'normal',
		//图片队列连接字体颜色
		'queueLinkColor':'white',
		//图片队列连接鼠标进入时字体颜色
		'queueHoverColor':'orange'

}

 

 

改变一下配置看看效果:



 

 

 实例下载地址:

 

http://download.csdn.net/source/2684034


 

  • 大小: 166.5 KB
  • 大小: 133.7 KB
  • 大小: 635.4 KB
  • 大小: 293.7 KB
0
0
分享到:
评论

相关推荐

    图片轮换-jQuery插件

    "图片轮换-jQuery插件"就是这样一个工具,它能够帮助开发者快速构建具有动态效果的图片轮换组件。 该插件的特点在于其支持动态配置样式,这意味着开发者可以在运行时调整轮播的外观和行为,如切换动画、图片间隔...

    Jquery1.7.1----2.轮换图片展览

    轮换图片展览”指的是使用jQuery库的1.7.1版本实现一个图片轮播展示的效果。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在1.7.1这个版本中,它提供了丰富的API...

    jquery.anoslide插件--响应式图片轮换播放效果

    5、基于jquery库实现的插件 6、多种配置选项实现多种不同效果 7、图像延迟加载 8、支持自动旋转     使用说明以及原作者网页地址:...

    超好用的jQuery图片轮换插件nivo-slider

    nivo-slider是一款流行的jQuery插件,专门用于创建美观、流畅的图片滑块。它提供了多种过渡效果,使得图片轮换看起来更加专业和引人入胜。nivo-slider的设计理念是易用性和灵活性,无论你是初学者还是高级开发者,都...

    jquery 图片轮换插件

    **jQuery图片轮换插件详解** 在Web开发中,为了吸引用户注意力并提供丰富的视觉体验,经常需要使用图片轮换效果。"jQuery图片轮换插件"是实现这一功能的有效工具,它允许网页上的图片每隔几秒钟自动切换,使得内容...

    jquery.anoslide插件--响应式图片轮换播放效果.zip

    **jQuery插件** 是扩展jQuery功能的一种方式,通常包含一组预定义的方法和事件处理器。jQuery.anoslide就是这样的插件,它封装了一系列方法,如初始化、播放、暂停、跳转等,方便用户在自己的项目中调用和定制。 **...

    jQuery-图片轮换

    本文将深入探讨如何使用jQuery实现图片轮换,包括基本原理、相关函数以及常见插件的使用。 一、jQuery图片轮换的基本原理 图片轮换的基本思想是通过JavaScript控制DOM(Document Object Model)中的图片元素显示与...

    jquery 轮换图片插件 FlexSlider

    FlexSlider 是一个基于 jQuery 的流行图片轮播插件,它为网页设计师提供了强大的工具来创建美观、响应式的图片轮换效果。这个插件以其灵活性、易用性和丰富的自定义选项而受到广泛赞誉。在本文中,我们将深入探讨 ...

    jquery图片轮换插件

    **jQuery图片轮换插件详解** 在Web开发中,图片轮换是一种常见的视觉效果,用于展示多张图片或内容,通常应用于网站的首页或者产品展示区。jQuery作为一款轻量级、高性能的JavaScript库,提供了丰富的插件来实现这...

    图片轮换——jQuery插件

    【jQuery图片轮换插件详解】 在Web开发中,图片轮换是一种常见的视觉效果,用于展示多张图片,提升用户体验,吸引用户注意力。jQuery作为一款轻量级、高性能的JavaScript库,提供了丰富的功能来简化此类任务。本篇...

    jQuery-轮换

    除了手动编写轮换逻辑,还可以使用预构建的jQuery轮换插件,如jQuery Cycle Plugin,它提供了丰富的选项和过渡效果,使得实现复杂的轮换变得更加容易。 总的来说,jQuery轮换是网页动态效果的重要组成部分,通过...

    jquery 实现的一个图片轮换变化

    在这个“jquery实现的一个图片轮换变化”项目中,我们可以深入探讨jQuery如何被用来创建动态且吸引人的图片展示效果。 首先,我们要了解jQuery中的基本概念。jQuery对象是库的核心,它封装了DOM元素,使得操作DOM变...

    jQuery焦点图 图片轮换

    jQuery焦点图是一种常见的网页设计元素,它用于展示一组图片,并以自动轮换或用户交互的方式显示每一张图片,常用于网站的首页或者产品展示区,为用户提供动态且吸引人的视觉体验。这种效果不仅可以用于图片展示,还...

    jquery图片轮换插件(使用超级简单,效果好)

    **jQuery图片轮换插件详解** 在Web开发中,图片轮换是一种常见的视觉效果,用于展示多张图片或内容,给用户带来动态的浏览体验。本文将深入探讨一个基于jQuery的图片轮换插件,该插件具有使用简单、效果优良的特点...

    jquery新闻图片轮换

    以下是一个简单的 jQuery 图片轮换插件示例: ```javascript // 定义轮换插件 (function($) { $.fn.newsSlider = function(options) { var settings = $.extend({ interval: 3000, // 轮换间隔时间,单位毫秒 ...

    用jquery实现图片轮换

    通过上述代码分析可以看出,这个图片轮换插件通过jQuery实现了基本的图片轮换功能,并且支持通过点击或悬停在按钮上来手动控制图片的切换。同时,也实现了自动播放和暂停功能。整个过程充分利用了jQuery提供的DOM...

    50个精彩JQuery插件案例

    1. **jQuery插件的原理**:jQuery插件是基于jQuery核心功能扩展的功能模块,通过$.fn.extend()方法,将新方法添加到jQuery对象的prototype上,使得所有jQuery选择器都能调用这些新方法。 2. **DOM操作**:jQuery...

    jquery插件

    在描述中提到的"图片轮换"是一种常见的jQuery插件应用,它允许网页上的图片自动切换,常用于制作幻灯片展示或产品轮播效果。例如,一个名为"jiaoben1739"的插件可能就是这样一个实现图片轮换的工具,它可能包含以下...

    jquery 广告轮换插件

    **jQuery 广告轮换插件——jQuery_xSlider广告幻灯片插件详解** 在网页设计中,广告轮换是一种常见的展示方式,它能够有效地吸引用户的注意力,展示多个广告或内容,而无需用户手动切换。jQuery,作为一款广泛使用...

Global site tag (gtag.js) - Google Analytics