`
jianguang_qq
  • 浏览: 91802 次
  • 性别: Icon_minigender_1
  • 来自: 深圳南山
社区版块
存档分类
最新评论

jWidget:js slide轮播、tab页签

阅读更多

jWidget: a mini javascript widget library。个人业余写的小型js widget库,刚刚起步,目前已实现轮播SlideView,TabView等,后期会考虑pager分页码、下拉选择框、走马灯等常用widget。

jWidget的目标是:小巧、灵活、强大

 

目前完全独立版压缩后 6.64 KB,

QZFL版压缩后 4.80 KB,

后期会考虑YUI、jQuery等版本。

 

google code 地址:http://code.google.com/p/j-widget/

代码及实例下载:http://j-widget.googlecode.com/files/j-widget.zip

 

 

欢迎各位批评指正,优化。

 

jWidget.ui.SlideView("slider1", {panelWrapper:"slide_panel",navWrapper:"slide_nav"});
jWidget.ui.SlideView("slider2", {effect: 'scrolly'});
jWidget.ui.SlideView("slider3", {effect: 'scrolly fade'});
jWidget.ui.SlideView("slider4", {effect: 'fade', navWrapper : 'slider4_nav'});
jWidget.ui.SlideView("slider5", {effect: 'fade'});  
 
	/**
	 * Slide轮播效果
	 * @param {json} 配置参数
	 *		@param {String|HTMLElement} container 包括id号,或则Html Element对象,Slider容
	 *		@param eventType         'mouseover' or 'click',默认'mouseover'
	 *		@param autoPlay          是否自动播放,默认自动播放
	 *		@param autoPlayInterval  自动播放间隔时间,默认3秒
	 *		@param effect            播放效果 'none','scrollx', 'scrolly', 'fade'
	 *		@param panelWrapper     Slide内容item的容器,默认为Slider容器的firstChild
	 *		@param navWrapper        Slide导航的容器,默认为Slider容器的secondChild
	 *		@param navClassOn        navs鼠标移上后的样式,默认为'on'
	 *		@param slideTime         滑动时延
	 *		@param width             宽度(srcollx),如样式中已有,会自动获取,一般无需填写
	 *		@param height            高度(scrolly),如样式中已有,会自动获取,一般无需填写
	 */
 

 

jWidget.ui.TabView("theme", {panelWrapper : 'theme_panel', navWrapper : 'theme_nav'});	
jWidget.ui.TabView("sale", {panelWrapper : 'danpin1_panel', navWrapper : 'danpin1_nav', navClassOn:'tab_on'});
jWidget.ui.TabView("tab2",{"type":"list"});

 

	/**
	 * Tab切换效果
	 * @param {json} 配置参数
	 *		@param {String|HTMLElement} container 包括id号,或则Html Element对象,Slider容
	 *		@param eventType         'mouseover' or 'click',默认'mouseover'
	 *		@param type              'normal'普通 or 'list'间隔形式(参考demo3)
	 *		@param panelWrapper      Slide内容item的容器,默认为Slider容器的firstChild
	 *		@param navWrapper        Slide导航的容器,默认为Slider容器的secondChild
	 *		@param navClassOn        navs鼠标移上后的样式,默认为'on'
	 */
 

 

分享到:
评论
5 楼 jianguang_qq 2009-11-25  
abruzzi 写道
jQuery就是被设计成方便操作DOM的一个库,能用就用,方便多了。



好奇怪,为什么那么多人扯上jQuery。
我这个东西和jQuery没有任何关系呀!!!
4 楼 abruzzi 2009-11-23  
jQuery就是被设计成方便操作DOM的一个库,能用就用,方便多了。
3 楼 cuixiping 2009-11-21  
这种小东东不需要拉扯个jquery进来吧
2 楼 hanjiangit 2009-11-09  
确实  不要依赖jquery就更好
1 楼 makemyownlife 2009-11-08  
建议楼主可以考虑独立jquery版本方面,也可以方便使用 ,个人浅见

相关推荐

    源代码:网站制作轮播图变换.rar

    为了让轮播图能够自动播放和响应用户交互,我们需要使用JavaScript(通常搭配jQuery库)。JavaScript代码会监听事件(如点击按钮、定时器触发),改变图片的`active`状态,并更新DOM以显示新的图片。例如: ```...

    BootStrap实现轮播图效果(收藏)

    carousel slide:整个轮播图的最外边一层的样式 data-ride:用于标记轮播在页面加载时就开始动画播放 data-interval:自动循环每个项目之间延迟的时间量。如果为 false,轮播将不会自动循环 data-wrap:轮播是否...

    slide.js:用于提供图片轮播效果

    #slide.js###效果该js不依赖任何类库因为使用了css3的动画属性,目前只支持IE8+,在IE9下没有css动画效果,所以推荐使用无缝滚动的js动画方案需要一个父容器,最好是div(因为只测试了div),要有明确的长宽,哪怕是...

    js图片轮播脚本

    "js图片轮播脚本"是利用JavaScript语言实现这一功能的技术手段。JavaScript,作为网页的客户端脚本语言,能让我们在不刷新页面的情况下进行动态交互,非常适合用于创建图片轮播效果。 首先,我们要理解图片轮播的...

    JS 完美轮播图

    **JS 完美轮播图**是网页设计中不可或缺的一部分,它允许用户浏览一系列图片、内容或信息,而无需手动更改页面。JavaScript 提供了动态和交互性,使得轮播图更加吸引人。在这个项目中,我们将深入探讨如何创建一个...

    js使用swiper实现层叠轮播效果实例代码

    swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好。 由于简单这里当然就不会去详细介绍了,下面就来开始本文的正文内容 实现过程: 一.移动端-需求swiper 4.0.3实现层叠轮播 ...

    淘宝免费图片轮播代码

    - `<div class="slider-promoJ_SliderJ_TWidget tb-slide">`:这是轮播图的容器,包含所有的轮播图元素。 - `<ul class="lst-main tb-slide-list">`:存储所有轮播图片的列表。 - `<li>`:每个 `<li>` 代表一个...

    js广告轮播代码

    在本文中,我们将深入探讨如何使用JavaScript实现图片广告轮播代码,这是一种常见的网页设计元素,能够以吸引人的形式展示多个广告或图片。 首先,我们需要了解轮播的基本结构。一个基本的图片轮播通常包含以下几个...

    html+css+js原生轮播

    综上所述,实现一个HTML+CSS+JS原生轮播效果需要结合HTML结构、CSS样式和JavaScript逻辑。通过不断调整和完善,可以创建出满足各种需求的高性能轮播组件。在实际项目中,可能还需要考虑浏览器兼容性、性能优化和无...

    图片轮播左右轮播封装插件

    在压缩包中的"Slide"文件很可能是插件的源代码,包括JavaScript文件(可能有.min.js版本,是压缩优化过的)、CSS文件以及可能的示例或文档。开发者需要根据这些文件来理解和使用这个插件。 总的来说,这个"图片轮播...

    Javascript图片轮播(模仿QQ图片首页轮播效果)

    在JavaScript编程中,图片轮播是一种常见的网页动态效果,它能为用户提供动态的视觉体验,增强网站的交互性。本文将详细讲解如何模仿QQ图片首页的轮播效果,这是一个非常适合初学者实践的项目。 首先,我们需要理解...

    练习:京东轮播图.rar

    在本练习中,我们将探讨如何实现一个京东商城风格的轮播图效果,它包含了自动切换图片和用户交互式点击切换。这个项目主要涉及到的技术栈包括HTML布局、Bootstrap的Carousel插件以及JavaScript。以下是对这些技术的...

    Slide焦点图轮播图切换js

    "Slide焦点图轮播图切换js" 是一种使用JavaScript(尤其是jQuery库)实现的动态效果,它可以将多张图片以滑动的方式进行切换,提升用户体验。 jQuery.Xslider.js 是一个专门用于实现这种效果的插件。jQuery是一个轻...

    图片轮播样式的电子杂志

    - `script.js`或`jquery.js`:JavaScript文件,实现轮播逻辑和事件处理。 在开发过程中,需要注意以下几点: - **兼容性**:确保轮播效果在不同浏览器(如Chrome、Firefox、Safari等)和设备(桌面、移动)上都能...

    js轮播图_javascript_

    在本文中,我们将深入探讨如何使用JavaScript来开发一个基本的轮播图,这是一种常见的网页元素,用于展示一系列图像或其他内容,通过自动或手动切换在有限的空间内展示多个项目。 首先,我们需要理解轮播图的基本...

    javascript轮播图片的实现

    JavaScript轮播图片是一种常见的网页动态效果,用于展示多张图片或内容,并在用户无操作时自动切换,提供良好的用户体验。Swiper插件是实现这一功能的流行选择,尤其适用于手机端,因为它具有高度的可定制性和优秀的...

    js自动轮播banner

    JavaScript自动轮播Banner是一种常见的网页元素,用于展示多个图片或内容,通过自动切换来吸引用户的注意力。这种功能在网站设计中被广泛应用,特别是在首页、产品展示或者广告区域。本篇文章将详细探讨如何使用...

    全屏轮播代码.

    * contentCls:slide-kun1364608168184content,表示轮播的内容容器的class名。 * triggerCls:slide-kun1364608168184triggers,表示轮播的触发器的class名。 * navCls:slide-kun1364608168184triggers,表示轮播...

    javascript实现图片轮播功能demo

    在本示例中,我们关注的是使用JavaScript实现一个图片轮播功能,这在现代网页设计中非常常见,用于展示一系列图片或内容。下面将详细介绍如何使用JavaScript实现这一功能。 首先,我们需要HTML结构来承载轮播组件。...

    jquery slide show 轮播示例

    **jQuery Slide Show 轮播示例** 在网页设计中,轮播图(Slide Show)是一种常见的元素,用于展示多张图片或内容,通常应用于网站的Banner区域。jQuery 是一个广泛使用的JavaScript库,它提供了丰富的功能和简洁的...

Global site tag (gtag.js) - Google Analytics