JQuery中Table标签页和无缝滚动
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/tab1.css" />
<script src="js/jquery.js"></script>
<script src="js/tab1.js "></script>
</head>
<body> <div class="tabTitle">
<ul>
<li class="current0">xhtml</li>
<li>css</li>
<li>jquery</li>
</ul>
</div> <div class="tabContent">
<div>xhtml的内容</div>
<div class="hide">css的内容</div>
<div class="hide">jquery的内容</div>
</div>
</body>
</html>
CSS的代码：
*{
padding: 0;
margin: 0;
}
li{
list-style-type: none;
}
body{
margin: 50px;
}
.hide{
display: none;
}
.tabTitle ul{
overflow: hidden;
_height:1px;
}
.tabTitle ul li{
float: left;
border: 1px solid #abcdef;
border-bottom: none;
height: 30px;
line-height: 30px;
padding:0 15px;
margin-right: 3px;
cursor: pointer;
}
.current0{
background: #abcdef;
color: #FF6600;
}
.current1{
background: red;
color: teal;
}
.current2{
background: green;
color: yellow;
}
.tabContent div{
border: 1px solid #f60;
width: 300px;
height: 250px;
padding: 15;
}
js代码：
$(function(){
var ali=$('.tabTitle ul li');
var aDiv=$('.tabContent div');
var timeId=null;
ali.mouseover(function(){
//this 定义成匿名函数
var _this=$(this);
//$(this)方法属于哪个元素，$(this)就是指哪个元素
//siblings 除了选中的兄弟元素
//setTimeout()： 延迟某一段代码的执行
timeId=setTimeout(function(){
//_this.addClass('current').siblings().removeClass('current');
_this.addClass(function(){
return 'current'+_this.index();
}).siblings().removeClass();
var index=_this.index();
//如果想用一组元素控制另外一组元素的显示或者隐藏，需要用到索引
aDiv.eq(index).show().siblings().hide();
},500);
//鼠标移出时清除定时器
}).mouseout(function(){
//clearTimeout 的作用是清除定时器
clearTimeout(timeId);
});
});
效果：
无缝滚动HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/hider.css" />
<script src="js/jquery.js"></script>
<script src="js/slider.js"></script>
</head>
<body>
<a href="javascript:;" class="goLeft">向左走</a>
<a href="javascript:;" class="goRight">向右走</a> <div class="warp">
<ul>
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/5.jpg" alt=""></li>
</ul> </div>
</body>
</html>
CSS代码：
*{
padding: 0;
margin: 0;
}
li{
list-style-type:none;
}
body{
margin: 50px;
}
.warp{
border: 3px solid #f00;
width: 800px;
height: 200px;
position: relative;
overflow: hidden;
}
.warp ul{
overflow: hidden;
width: 1600px;
position: absolute;
left: 0;
top:0;
_height:1px;
}
.warp ul li{
float: left;
}
js代码：
//如果想使一个元素运动起来，一般情况下这个元素必须要具有与position属性
$(function(){
var oul=$('.warp ul');
var oulHtml=oul.html();
oul.html(oulHtml+oulHtml);
var timeId=null; var ali=$('.warp ul li');
//或缺li的寬度
var aliWidth=ali.eq(0).width();
//或缺大小
var aliSize=ali.size();
var ulWidth=aliWidth*aliSize;
oul.width(ulWidth); var speed=2; function slider(){
if(speed<0)
{
if(oul.css('left')==-ulWidth/2+'px')
{
oul.css('left',0);
}
oul.css('left','+=-2px');
} if(speed>0){
if(oul.css('left')=='0px')
{
oul.css('left',-ulWidth/2+'px');
}
oul.css('left','+='+speed+'px');
} } //setInterval()函数的作用，每个一段时间执行该函数的代码
timeId=setInterval(slider,30); $('.warp').mouseover(function(){
//clearInterval() 清除定时器
clearInterval(timeId);
});
$('.warp').mouseout(function(){
timeId=setInterval(slider,30);
}); $('.goLeft').click(function(){
speed=-2;
});
$('.goRight').click(function(){
speed=+2;
});
});
轮播图：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圖片輪播</title>
<link rel="stylesheet" href="css/slider.css"/>
<script src="js/Jquery.js"></script>
<script src="js/silder.js"></script>
</head>
<body>
<div class="wrap">
<ul>
<li><img src="img/1.jpg" alt="111111"></li>
<li><img src="img/2.jpg" alt="222222"></li>
<li><img src="img/3.jpg" alt="333333"></li>
<li><img src="img/4.jpg" alt="444444"></li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<p class="introduce"></p>
<span>111111</span>
</div>
</body>
</html>
css:
*{
padding: 0;
margin: 0;
}
li{
list-style-type: none;
}
body{
margin: 50px;
}
.wrap{
width: 500px;
height: 350px;
border: 3px solid #f00;
position: relative;
overflow: hidden;
}
.wrap ul{
width: 2000px;
position: absolute;
left: 0;
top:0;
}
.wrap ul li{
float: left;
width: 500px;
}
.wrap ol{
position: absolute;
bottom: 10px;
right: 10px;
}
.wrap ol li{
float: left;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
border:1px solid #fc0;
background: #000;
color: #fff;
margin-right: 3px;
cursor: pointer;
}
.wrap ol li.current{
background: #fff;
color: #000;
}
.wrap .introduce{
height: 30px;
line-height: 30px;
width: 400px;
background: rgba(0,0,0,0.5);
color: #fff;
position:absolute;
bottom: 10px;
left: 10;
/*opacity: 0.5;
filter: alpha(opacity=50);*/
}
JS:
$(function(){
var oul=$('.wrap ul');
var ali=$('.wrap ul li')
var numli=$('.wrap ol li');
var aliWidth=$('.wrap ul li').eq(0).width();
var _now=0; //控制数字样式的计时器
var _now2=0; //控制图片运动距离的计数器
var timeId;
var aimg=$('.wrap ul img');
var op=$('.wrap p');
numli.click(function(){
//获取索引
var index=$(this).index();
//同步
_now=index;
_now2=index;
var imgAlt= aimg.eq(_now).attr('alt');
op.html(imgAlt);
$(this).addClass('current').siblings().removeClass();
oul.animate({'left':-aliWidth*index},500);
});
//图片运动的函数 无返回值
function slider(){
if(_now==numli.size()-1){
ali.eq(0).css({
'position':'relative',
'left':oul.width()
});
_now=0;
}
else{
_now++;
}
_now2++;
numli.eq(_now).addClass('current').siblings().removeClass();
var imgAlt= aimg.eq(_now).attr('alt');
op.html(imgAlt);
oul.animate({'left':-aliWidth*_now2},500,function(){
if(_now==0){
ali.eq(0).css('position','static');
oul.css('left',0);
_now2=0;
}
});
}
timeId=setInterval(slider,1500);
/*$('.wrap').mouseover(function(){
clearInterval(timeId);
});
$('.wrap').mouseout(function(){
timeId=setInterval(slider,1500);
});*/
$('.wrap').hover(function(){
clearInterval(timeId);
},function(){
timeId=setInterval(slider,1500);
});
});
效果：
JQuery中Table标签页和无缝滚动的更多相关文章
- 【vue】vue中实现标签页
前言 tab标签页实现很多, 纯css实现, js实现等, 外加一些特殊动画. vue中实现标签页实现 keep-alive标签和is特性 vue-router中嵌套路由 is特性实现(推荐) 优点: ...
- jQuery中 对标签元素操作（2）
一.属性操作 1.获取属性和设置属性 例如下jQuery代码: var $para=$("p"); //获取<p>节点 var p_txt=$par ...
- 踩iviewui中Tabs 标签页数据绑定坑
今天小颖要实现点击Tabs 标签页中每个标签,并动态获取当前点击的标签值. 一句话说不清楚,那就看动态图吧 小颖一开始看官网写的代码是: <template> <Tabs :valu ...
- ASP.NET中利用DataList实现图片无缝滚动
这个问题之前也困扰我,后来解决了,拿出来分享下,以后用也方便,代码很容易看懂,不多说什么了 <div id="demo" style="overflow: hidd ...
- jquery中table里面的tr里的input添加一行，并且第一列autoincrement
实现添加一行并且第一列由A0开始autoincrement,代码如下(在文件的同一个文件夹下添加一个jquery.js文件): <!DOCTYPE html PUBLIC "-//W3 ...
- HTML5中table标签与form标签的区别
html中form表示一个表单,用来把一系列的控件包围起来,然后再统一发送这些数据到目标,比如最常见的注册,你说需要填写的资料,都是被封装在form里的,填写完毕后,提交form内的内容,如果不再fo ...
- Table对象代表一个HTML表格，在文档中<table>标签每出现一次，一个table对象就会被创建。
1.对象集合 cells[] 返回包含表格中所有单元格的一个数组 rows[] 返回包含表格中所有行的一个数组 tBodies[] 返回包含表格中所有tbody的一个数组(主包含ty和td) 2.对象 ...
- jQuery中 对标签元素操作（1）
一:创建元素节点(添加) 创建元素节点并且把节点作为元素的子节点添加到DOM树上 append(): 在元素下添加元素 用法:$("id").append(" ...
- 自己编写jQuery插件 之 无缝滚动
一. 效果图 二. Html骨架结构 <div class="box"> <ul> <li>1</li> <li>2&l ...
随机推荐
- Chapter 1(数据结构绪论)
附件列表 数据结构绪论.jpg
- P1099 树网的核 && P2491 [SDOI2011]消防
给定一棵树, 你可以在树的直径上确定一条长度不超过 \(S\) 的链, 使得树上离此链最长的点距离最小, 输出这个距离 P2491 数据范围为 P1099 的 \(1000\) 倍 Solution ...
- oracle改进之将阿拉伯数字转换成中文数字
本博客是自己在学习和工作途中的积累与总结,仅供自己参考,也欢迎大家转载,转载时请注明出处 http://www.cnblogs.com/king-xg/p/6839738.html 将阿拉伯数字转 ...
- HTTP协议(2)-------- 网络编程
1. HTTP请求格式 做过Socket编程的人都知道,当我们设计一个通信协议时,“消息头/消息体”的分割方式是很常用的,消息头告诉对方这个消息是干什么的,消息体告诉对方怎么干.HTTP协议传输的消息 ...
- python学习笔记3--set
#int string list tuple dict bool float set #集合:天生去重 s=set() #空的集合 s2={'} ls=[1,2,3,4,5,6,7,1,2,3,4] ...
- Gulp安装笔记
前言 总的来说,玩gulp的流程是这样的: 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 ...
- OAuth2：Authorization Flows
Ref:http://www.dannysite.com/blog/176/ OAuth2.0协议定义了用于获得授权的四种主要授权类型. 1. Client Credentials 一种基于APP的密 ...
- openstack kilo部署-基础环境
公司也想搞个私有云玩玩,于是展开了一系列的调研,部署测试,openstack 有几个版本真是坑爹!!,如果喜欢被虐有兄弟,你就试试 openstack 的 juno , icehouse等版本,用不了 ...
- 天梯赛 L2-007. （并查集） 家庭房产
题目链接 题目描述 给定每个人的家庭成员和其自己名下的房产,请你统计出每个家庭的人口数.人均房产面积及房产套数. 输入格式: 输入第一行给出一个正整数N(<=1000),随后N行,每行按下列格式 ...
- 关于UDP数据报引发“异步错误”的疑问
在UNP卷一第三版的第8章8.9小节中说到:如果udp服务器没有启动,udp客户端在使用sendto发送一行文本后,将会等待一个永远也不会出现的应答从而阻塞在recvfrom调用上. 由于服务器段不存 ...