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 ...

随机推荐

利用SHELL的PROMPT_COMMAND添加日志审计功能，实时记录任何用户的操作到日志文件中
利用 PROMPT_COMMAND 实现命令审计功能:记录什么用户,在什么时间,做了什么操作,然后将查到的信息记录到一个文件里. 具体操作: 将以下内容追加到/etc/profile: ####### ...
Python【多线程与多进程】
import time,threading print("=======串行方式.并行两种方式调用run()函数=======")def run(): print('哈哈哈') # ...
ElasticStack系列之八 & _source 字段
有很多人会有这样的一个疑问: _source字段存储的是索引的原始内容,那 store 属性的设置是为何呢?elasticsearch 为什么要把 store 的默认取值设置为 no?设置为 yes ...
P1075 质因数分解
P1075 质因数分解题目描述已知正整数 n 是两个不同的质数的乘积,试求出两者中较大的那个质数. 输入输出格式输入格式: 一个正整数 n . 输出格式: 一个正整数 p ,即较大的那个质数. ...
《剑指offer》面试题45 圆圈中最后剩下的数字(Java版本）
引言这道题网上的讲解都是直接抄书,没意思,所以想自己写一写,补充一下,便于自己理解.另外,大家都忽略了经典解法,虽然这种解法效率不及第二种,但是我觉得在项目当中阅读性其实很重要,牺牲一点点效率保证代 ...
wav文件格式及ffmpeg处理命令
wav文件头详解符合RIFF(Resource Interchange File Format)规范的wav文件的文件头记录了音频流的编码参数等基本信息.wav文件由多个块组成,至少包含RIFF标志 ...
贪心问题：区间覆盖 POJ 2376 Cleaning Shift
题目:http://poj.org/problem?id=2376 题意:就是 N 个区间, 输入 N 个区间的 [begin, end],求能用它们覆盖区间[1,T]的最小组合. 题解: 1. 首先 ...
bat 批量更改文件名
通过如下批处理命令可实现批量更改文件名: @echo set DIR="%cd%" echo DIR=%DIR% set /p ext=文件类型: set /p find=要替换内 ...
Redis学习七：Redis的持久化-总结(Which one)
1.官网建议 2.RDB持久化方式能够在指定的时间间隔能对你的数据进行快照存储 3.AOF持久化方式记录每次对服务器写的操作,当服务器重启的时候会重新执行这些命令来恢复原始的数据,AOF命令以red ...
php设计模式之六大设计原则
1.单一职责定义:不要存在多于一个导致类变更的原因.通俗的说,即一个类只负责一项职责. 场景:类T负责两个不同的职责:职责P1,职责P2.当由于职责P1需求发生改变而需要修改类T时,有可能会导致 ...

JQuery中Table标签页和无缝滚动

JQuery中Table标签页和无缝滚动的更多相关文章

随机推荐

热门专题