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

随机推荐

八、java常用类
目录一.字符串相关类 String类 StringBuffer类二.基本数据类型包装类三.Math类四.File类五.枚举类一.字符串相关类 1.String类 java.lang.Str ...
python---基础知识回顾（七）迭代器和生成器
前戏:迭代器和生成器迭代: 如果给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历我们称为迭代(Iteration). Python的for循环不仅可以用在 ...
Vue组件穿透
1. element ui怎么修改单独一个label的颜色用 >>> 进行组件的穿透
Linux装机利器Cobbler安装配置
Linux装机利器Cobbler安装配置 2011-05-27 15:31:05 分类: LINUX 一.安装环境 centos 5.4 关掉iptables 关掉 selinux selinux ...
GitHub更新已经fork的项目
clone 自己的 fork 分支到本地可以直接使用 GitHub 客户端,clone 到本地,如果使用命令行,命令为: $ git clone git@github.com:morethink/g ...
[vmware]另类解决vmware关闭win10死机或蓝屏问题
升级win10后在使用虚拟机发生一个问题,本人的win10版本为win10 9879, 在使用vmware时,当关机会整个系统死机,在网上搜索后发现这是由于win10内核升级导致vmware不兼容,最 ...
HDU 4500 小Q系列故事——屌丝的逆袭
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4500 解题报告:简单题,数据范围不大,直接暴力每个点,然后再比较出得分最大的点的位置和分数. #inc ...
Java并发编程(2) AbstractQueuedSynchronizer的设计与实现
一前言上一篇分析AQS的内部结构,其中有介绍AQS是什么,以及它的内部结构的组成,那么今天就来分析下前面说的内部结构在AQS中的具体作用(主要在具体实现中体现). 二 AQS的接口和简单示例上篇 ...
SQL Server 问题之排序规则(collation)冲突
一.写在前面最近公司进行开发环境升级,数据库也准备了一个新的服务器,一切准备好后开始数据迁移,采取的方式为对现有Database(现有服务器Windows Server 2003 + SQL Ser ...
spring-boot-单元测试参数数
简单案例 @RunWith(Parameterized.class) public class ParameterTest { // 2.声明变量存放预期值和测试数据 private String f ...

JQuery中Table标签页和无缝滚动

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

随机推荐

热门专题