jquery tab选项卡、轮播图、无缝滚动
最近做一个页写了一个星期,觉得自己对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选项卡、轮播图、无缝滚动的更多相关文章
- 【自定义轮播图】微信小程序自定义轮播图无缝滚动
先试试效果,可以通过设置参数调整样式 微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...
- jQuery淡入淡出轮播图实现
大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...
- 用jQuery写的轮播图
效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...
- jQuery实现简易轮播图的效果
(图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...
- 用纯css、JavaScript、jQuery简单的轮播图
完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为 img ...
- JavaScript—原生轮播和无缝滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQuery实现一个轮播图
1.HTML <div class="banner"> <div class="b_main"> <div class=" ...
- 记录一下自己用jQuery写的轮播图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery淡入淡出轮播图
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- webAPP制作框架Ionic--构建APP侧边栏 底部选项卡 轮播图 加载动画
超好用的移动框架--Ionic Ionic是一个轻量的手机UI库,具有速度快,界面现代化.美观等特点. 为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版 ...
随机推荐
- 【Java面试题】4 静态变量和实例变量的区别?详细解析
在语法定义上的区别:静态变量前要加static关键字,而实例变量前则不加.在程序运行时的区别:实例变量属于某个对象的属性,必须创建了实例对象,其中的实例变量才会被分配空间,才能使用这个实例变量.静态变 ...
- informatica 中的workflow连接mysql数据配置DSN
先要下载mysqlodbc 一步步安装之后 ,再从管理工具里面找到ODBC,最后选择系统DSN,添加mysql驱动之后,进入添加编辑: 在workflow里面的配置连接字符串就写刚刚配置的连接名称 比 ...
- oracle之trunc(sysdate)
--截取后得到的仍为date数据类型 select trunc(sysdate) from dual;--2017-03-13 00:00:00select trunc(sysdate+1) from ...
- Python 入门(十)列表生成式
生成列表 要生成list [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],我们可以用range(1, 11): >>> range(1, 11) [1, 2, 3, ...
- leetcode -- permutation 总结
leetcode上关于permutation有如下几题 Permutation Sequence Next Permutation Permutations Permutations II
- PHP-CGI 进程 CPU 100% 与 file_get_contents 函数的关系
[文章作者:张宴 本文版本:v1.0 最后修改:2011.08.05 转载请注明原文链接:http://blog.s135.com/file_get_contents/] 有时候,运行 Nginx.P ...
- 导航跳转后保持选中状态 jquery高亮当前选中菜单
功能需求:今天在写一个站点需要用到在导航菜单点击链接跳转到新页面后,高亮当前菜单样式.简单的说,就是我点击导航菜单中的一个栏目,跳转到该栏目下,该栏目菜单也同时高亮(可以是背景色也可以是背景图片) 解 ...
- 在SQL数据库中怎么去掉某一列的中的一写特殊字符
用REPLACE函数,把空格替换成 ''. 例:去除 表table 中 col 列的空字符去除空格符:update table set col = REPLACE(col,' ','') 还有tab制 ...
- Parquet存储格式 - 论文翻译【转】
Apache Parquet是Hadoop生态圈中一种新型列式存储格式,它可以兼容Hadoop生态圈中大多数计算框架(Mapreduce.Spark等),被多种查询引擎支持(Hive.Impala.D ...
- java高级---->Thread之CyclicBarrier的使用
CyclicBarrier是一个同步辅助类,它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).今天我们就学习一下CyclicBarrier的用法. Cycl ...