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

随机推荐

左值与右值,左值引用与右值引用(C++11)
右值引用是解决语义支持提出的这篇文章要介绍的内容和标题一致,关于C++ 11中的这几个特性网上介绍的文章很多,看了一些之后想把几个比较关键的点总结记录一下,文章比较长.给出了很多代码示例,都是编译运 ...
Rigidbody和Collider
Rigidbody: 常用属性: Mass:默认为1,单位并不是g或kg,而是相对的质量计量单位,只决定物体的惯性: Drag:空气阻力: Angular Drag:角阻力,旋转时受的阻力: Use ...
安装MySQL5.7由于 Redistributable导致失败
今天上午安装MySQL5.7时一直提示 1: Action 10:59:21: INSTALL. 1: 1: MySQL Server 5.7 2: {F08E9C75-A42E-4962-8760- ...
转：IOS里的动画
摘要本文主要介绍核iOS中的动画:核心动画Core Animation, UIView动画, Block动画, UIImageView的帧动画. 核心动画Core Animation UIView动 ...
Java消息队列三道面试题详解！
面试题为什么使用消息队列? 消息队列有什么优点和缺点? Kafka.ActiveMQ.RabbitMQ.RocketMQ 都有什么区别,以及适合哪些场景? 面试官心理分析其实面试官主要是想看看: ...
c# lock的误解
一直以为lock 一个实例就可以了,没想到实例的类型还是有区别的 static object lockObjStatic = new object(); object lockObj = new ob ...
radioButton drawable selector
1.实现radioButton drawable selector更改图片,在drawable文件夹下,新建selector文件, <selector xmlns:android="h ...
HTML面试基础问题
1.Doctype作用?严格模式与混杂模式如何区分?它们有何意义? 1)<!DICTYPE>声明位于文档中的最前面,处于<html>标签之前,告诉浏览器的解析器,用什么文档 ...
退役 AFO
noi滚粗了 D类没学校要回去高考此博客停止更新此文章可能会继续更新看心情 [upd 2017.11.13] 看完今年noip log级别数据结构终于出现辣! 看来noip以后又多了一大块考点 ...
datagrid时间插件
jquery easyui日期控件中,在页面里用JS拿到设立的日期值的方法链接:http://blog.csdn.net/liweibin_/article/details/13509917 jqu ...

JQuery中Table标签页和无缝滚动

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

随机推荐

热门专题