最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉

自己查了一下资料写了几个封装好的tab选项卡、轮播图、无缝滚动

 $(function(){
//tab选项卡
jQuery.tab=function(objNav,oClassName,oBox){ //定义参数
var obj=$(objNav); //传参对象
var objWrap=$(oBox);
var oCN=oClassName;
var oUl=objWrap.children('ul');
obj.children('li').click(function(){
$(this).siblings('li').removeClass(oCN);
$(this).addClass(oCN);
objWrap.children('div').css('display','none');
objWrap.children('div').eq($(this).index()).css('display','block');
return false;
});
};
$.tab('.r_nav','r_active','.r_wrap');//对目标参数定义 (下面的也是一样定义对象:class 或者是ID名)
$.tab('.wtr','l_active','.listen');
$.tab('#nav ul','active');
//自动切换
jQuery.tab1=function(objNav,oClassName,oBox){
var obj=$(objNav);
var objWrap=$(oBox);
var objLi=obj.children('li');
var oCN=oClassName;
var oUl=objWrap.children('ul');
var oLi=oUl.children('li');
var time=null;
var i=0;
first();
auto();
function first(){
$(oLi[0]).css('zIndex',1);
};
function auto(){
setInterval(action,5000);
};
function action(){ if(i>6){
i=0
}
else{
objLi.eq(i).addClass(oCN);
objLi.eq(i).siblings('li').removeClass(oCN);
$(oLi[i]).css('zIndex',1);
$(oLi[i]).siblings('li').css('zIndex',-1);
++i;
} }
objLi.click(function(){
$(this).siblings('li').removeClass(oCN);
$(this).addClass(oCN);
oLi.eq($(this).index()).css('zIndex',999);
oLi.eq($(this).index()).siblings('li').css('zIndex',0);
return false;
});
};
$.tab1('.n_turn','active','.wrap'); jQuery.showOrhide=function(Wrap){
var oWrap=$(Wrap);
var oUl=oWrap.children('ul');
var oLi=oUl.children('li');
var Width=(oLi[0].offsetWidth)*(oLi.length);
oLi.mouseover(function(){
$(this).children('a.message').css('display','block');
});
oLi.mouseout(function(){
$(this).children('a.message').css('display','none');
});
}
$.showOrhide('.p_wrap');
//无缝滚动图片轮播
jQuery.changeImage=function(Wrap){
var oWrap=$(Wrap);
var oUl=oWrap.children('ul');
var oLi=oUl.children('li');
var Width=(oLi[0].offsetWidth)*(oLi.length)*2;
var time=null;
oUl.css('width',Width+'px');
oUl.append(oUl.children('li').clone(true));
auto();    
function auto(){   
    time = setInterval(showImg,25);   }; 
function showImg (){   
   var Left = parseInt(oUl.css('left'));  
  Left > -Width/2 ? Left-- : Left = 0;  
  oUl.css({left:Left+"px"});};  
  oWrap.hover( 
 function(){  
   clearInterval(time);    },   
 function(){   
  auto();
}); }
$.changeImage('.p_wrap');
})

写得不是很好,求大神不吝赐教

jquery tab选项卡、轮播图、无缝滚动的更多相关文章

  1. 【自定义轮播图】微信小程序自定义轮播图无缝滚动

    先试试效果,可以通过设置参数调整样式 微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...

  2. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  3. 用jQuery写的轮播图

    效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...

  4. jQuery实现简易轮播图的效果

    (图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...

  5. 用纯css、JavaScript、jQuery简单的轮播图

    完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为  img ...

  6. JavaScript—原生轮播和无缝滚动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JQuery实现一个轮播图

    1.HTML <div class="banner"> <div class="b_main"> <div class=" ...

  8. 记录一下自己用jQuery写的轮播图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. jquery淡入淡出轮播图

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. webAPP制作框架Ionic--构建APP侧边栏 底部选项卡 轮播图 加载动画

    超好用的移动框架--Ionic Ionic是一个轻量的手机UI库,具有速度快,界面现代化.美观等特点. 为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版 ...

随机推荐

  1. 解决 SharePoint 2010 拒绝访问爬网内容源错误的小技巧(禁用环回请求的两种方式)

    这里有一条解决在SharePoint 2010搜索爬网时遇到的“拒绝访问错误”的小技巧. 首先要检查默认内容访问帐户是否具有相应的访问权限,或者添加一条相应的爬网规则.如果目标资源库是一个ShareP ...

  2. HEVC 有损优化一

    前期通过X86汇编和C的优化,HEVC 编码有了大幅的提升,目前320x240可以到4~5 fps 了.从现在开始无损优化先放放(还有很大的优化空间),开始做有损优化.做有损优化,我们设定的前提是ps ...

  3. Don‘t talk.Just do it.

    对于算法,自己掌握的还是不多.并且我发现对于一个算法的理解非常重要.也许你会发现你貌似会用某总算法但是,他一旦变形,自己就无从下手. 还有就是对于算法.最好每次都自己敲,这样不仅能添加对于算法的熟度. ...

  4. swift开发之 -- 自动轮播图(UIScrollView+UIPageControl+Timer)

    比较简单,原理就不说了,这里只做记录: 代码如下: 1,准备 var pageControl:UIPageControl? var myscrollView:UIScrollView? var myT ...

  5. Rollup 与 webpack的区别

    特性: webpack 拆分代码, 按需加载: Rollup 所有资源放在同一个地方,一次性加载,利用 tree-shake 特性来剔除项目中未使用的代码,减少冗余,但是webpack2已经逐渐支持t ...

  6. TextSwitcher实现文本自动垂直滚动

    实现功能:用TextSwitcher实现文本自动垂直滚动,类似淘宝首页广告条. 实现效果: 注意:由于网上横向滚动的例子比较多,所以这里通过垂直的例子演示. 实现步骤:1.extends TextSw ...

  7. orcale增量全量实时同步mysql可支持多库使用Kettle实现数据实时增量同步

    1. 时间戳增量回滚同步 假定在源数据表中有一个字段会记录数据的新增或修改时间,可以通过它对数据在时间维度上进行排序.通过中间表记录每次更新的时间戳,在下一个同步周期时,通过这个时间戳同步该时间戳以后 ...

  8. eclispe创建gradle项目

    1.打开eclipse,选择Help——>install from Catalog,安装如图所示的gradle 2.右击空白处,new——>other——>Gradle——>G ...

  9. ceph 存储安装部署

    环境准备 1.三台服务器 cephnode01 192.168.254.83 cephnode02 192.168.254.84 cephnode03 192.168.254.85 2.基本环境配置 ...

  10. 如何理解精通PHP ?

    「精通 PHP」可以理解为以下三个: 精通「PHP 解析器 精通「PHP 语法.函数(这门语言) 精通「PHP 项目开发 1 精通「PHP 解析器」 可以从这里开始学习: PHP核心:骇客指南 :ht ...