基于jQuery的可用于选项卡及幻灯的切换插件

思路就不说了，记得以前写过一个自动切换的幻灯插件：，思路有部分是类似的。当然，本文中插件源码中也有注释~ 插件核心代码：点此查看演示


代码如下:

$.fn.WIT_SetTab=function(iSet){
/*
* @Mr.Think
* Nav: 导航钩子；
* Field：切换区域
* K:初始化索引；
* CurCls：高亮样式；
* Auto：是否自动切换；
* AutoTime：自动切换时间；
* OutTime：淡入时间；
* InTime：淡出时间；
* CrossTime：鼠标无意识划过时间
* Ajax：是否开启ajax
* AjaxFun：开启ajax后执行的函数
*/
iSet=$.extend({Nav:null,Field:null,K:0,CurCls:'cur',Auto:false,AutoTime:4000,OutTime:100,InTime:150,CrossTime:60},iSet||{});
var acrossFun=null,hasCls=false,autoSlide=null;
//切换函数
function changeFun(n){
iSet.Field.filter(':visible').fadeOut(iSet.OutTime, function(){
iSet.Field.eq(n).fadeIn(iSet.InTime).siblings().hide();
});
iSet.Nav.eq(n).addClass(iSet.CurCls).siblings().removeClass(iSet.CurCls);
}
//初始高亮第一个
changeFun(iSet.K);
//鼠标事件
iSet.Nav.hover(function(){
iSet.K=iSet.Nav.index(this);
if(iSet.Auto){
clearInterval(autoSlide);
}
hasCls = $(this).hasClass(iSet.CurCls);
//避免无意识划过时触发
acrossFun=setTimeout(function(){
//避免当前高亮时划入再次触发
if(!hasCls){
changeFun(iSet.K);
}
},iSet.CrossTime);
},function(){
clearTimeout(acrossFun);
//ajax调用
if(iSet.Ajax){
iSet.AjaxFun();
}
if(iSet.Auto){
//自动切换
autoSlide = setInterval(function(){
iSet.K++;
changeFun(iSet.K);
if (iSet.K == iSet.Field.size()) {
changeFun(0);
iSet.K=0;
}
}, iSet.AutoTime)
}
}).eq(0).trigger('mouseleave');
}

打包下载地址

赞 (0)

相关推荐

  • 基于jquery实现最简单的选项卡切换效果

    基于jquery实现最简单的选项卡切换效果

    这个功能在现在的网站中使用较为普遍,就是以选项卡的形式来对一些内容做了分类.,比如下面的天猫商城. 下面的源码是仿照天猫写的一个选项卡,实现起来的效果如下. 主要是利用我们在点击相应板块是触发它的单击事件,在单击事件中再对内容显示框(tabbox)进行相应项的显示和隐藏操作. 同时利用hover为其添加了鼠标滑过时的效果. 代码: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xh

  • jQuery自动切换/点击切换选项卡效果的小例子

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK">&

  • 基于jQuery实现仿百度首页选项卡切换效果

    基于jQuery实现仿百度首页选项卡切换效果

    以下代码比较简单,所以没给大家附太多的注释,有问题欢迎给我留言,具体详情请看下文代码吧. 先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title&

  • jQuery实现Tab选项卡切换效果简单演示

    jQuery实现Tab选项卡切换效果简单演示

    本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示,完全是自己的思考实现过程,分享给大家供大家参考.具体如下: 起初我Html代码架子是这样的: <div class="tabs"> <ul> <li class="acss" data-box="#panel-1">标签1</li> <li class="bcss" data-box="#panel-

  • jQuery实现选项卡切换效果简单演示

    jQuery实现选项卡切换效果简单演示

    本文实例讲述了jQuery实现选项卡切换效果简单演示代码.分享给大家供大家参考.具体如下: 运行效果图如下 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选项卡</title> <link type="text/css" rel="stylesheet" href="c

  • jquery自动切换tabs选项卡的具体实现

    本节内容:jquery实现自动切换选项卡. 代码: 复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%String path = request.getContextPath(); %><!DOCTYPE html PUBLIC "-//W3C//DTD HTM

  • jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

    jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

    本文实例讲述了jQuery实现的Tab滑动选项卡及图片切换效果.分享给大家供大家参考.具体如下: 这里汇总了几个Tab,滑动门,选项卡,图片切换,在一个网页中实现了超多的常用效果,大家喜欢的滑动门,焦点图切换,标签选项卡以及文字轮番等都集中在了一起,无聊的功劳,忙的时候还顾不上写,另外还加入了圆角,都是参考以前学习的知识写的.期间使用了jquery-1.6.2.min.js框架库. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n

  • 基于jQuery的可用于选项卡及幻灯的切换插件

    思路就不说了,记得以前写过一个自动切换的幻灯插件:,思路有部分是类似的.当然,本文中插件源码中也有注释~ 插件核心代码:点此查看演示 复制代码 代码如下: $.fn.WIT_SetTab=function(iSet){ /* * @Mr.Think * Nav: 导航钩子: * Field:切换区域 * K:初始化索引: * CurCls:高亮样式: * Auto:是否自动切换: * AutoTime:自动切换时间: * OutTime:淡入时间: * InTime:淡出时间: * CrossT

  • 基于jquery实现的tab选项卡功能示例【附源码下载】

    基于jquery实现的tab选项卡功能示例【附源码下载】

    本文实例讲述了基于jquery实现的tab选项卡功能.分享给大家供大家参考,具体如下: jquery这款杀手级别的js框架,显然已成了开发界的标准js库,在开发一般web应用的时候,常常用到.今天找到一个实现jquery tab页的插件,效果还不错,比自己用javascript和css去实现一个tab页好多了.用 tab 页美化界面,对于用户体验来说是显而易见,让各种不同类型的数据分布在不同的tab页中.很直观,也避免了很多数据现在在一个界面中,显得很臃肿,看上去就怕.这一款基于jquery 的

  • jquery渐隐渐显的图片幻灯闪烁切换实现方法

    本文实例讲述了jquery渐隐渐显的图片幻灯闪烁切换实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • 基于jquery的淡入淡出选项卡效果代码

    经典选项卡 .tab{text-align:left;width:500px;border:#ccc 1px solid;margin:100px;} .tab dt{border-bottom:#ccc 1px solid;height:25px;background:#f1f1f1;margin-bottom:-1px;height:25px;line-height:25px;} .tab dt strong{padding:0 15px;color:#444;} .tab dt a{dis

  • 基于jquery实现左右按钮点击的图片切换效果

    基于jquery实现左右按钮点击的图片切换效果

    jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个左右按钮点击的图片切换效果. 一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮都显示. 2.html结构分析 <div class="activity" id="activity-slide"> <a href

  • EasySlider 基于jQuery功能强大简单易用的滑动门插件

    EasySlider 基于jQuery功能强大简单易用的滑动门插件

    Easy Slider 是一个滑动门插件,支持任何图片或内容,当点击时实现横向或纵向滑动.它拥有一系列丰富的参数设置,可通过CSS来进行完全的控制.所以,基本上你只需要链接这个插件文件后,设置好内容,然后样式化CSS就可以了.EasySlider的功能 支持横向或纵向滑动 支持自动滚动 支持连续滑动 "上一屏"和"下一屏按钮" "到第一屏"和"最后一屏"按钮 隐藏的控制 可选的控制按钮包围标记 同一页面可支持多个滑动门 可设置

  • 基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage

    基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage

    先给大家展示效果图如下所示: 使用方法: 首先在head区引入jquery.js,jquery-ui.js,fullPage.js以及样式文件jquery.fullPage.css <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="

  • 基于JQuery的6个Tab选项卡插件

    顺便也找 来了不少优秀的Tab选项卡实例,在这里与大家分享一下.当然,最终我没有用到IdTabs以及如下任何一个实例,我只是很不服气的自己写了个小插件,尚 不完善,就不于此共享了.先来看看老外们出色的基于JQuery的各式Tab选项卡吧:1. jQuery 选项卡界面 / 选项卡结构菜单教程这种 类型的菜单在网页设计与开发中非常著名的.此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单.要非常留心此 演示哟,你一定会喜欢上它的.演示 | 下载 | 介绍 2

  • 基于jQuery实现选取月份插件附源码下载

    基于jQuery实现选取月份插件附源码下载

    这是一个基于jQuery的可以选择年份和月份的月份拾取插件,你可以设置点击页面上的任意元素触发弹出年月选择面板,可以是一个链接也可以是一个输入框,广泛应用于月份查询,而无需设置select表单. 效果展示        源码下载 HTML 首先将monthpicker插件相关的css和js文件载入,大家可以到源码下载里下载css和js文件. <link rel="stylesheet" type="text/css" href="jquery.mon

随机推荐