图片上下切换效果

最新推荐文章于 2022-05-24 21:42:59 发布

iteye_20812

最新推荐文章于 2022-05-24 21:42:59 发布

阅读量271

点赞数

分类专栏： WEB WEB开发 JavaScript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_20812/article/details/82245037

版权

JavaScript 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

WEB开发

6 篇文章 0 订阅

订阅专栏

WEB

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>基于jQuery的上下无缝滚动应用(单行或多行)</title>
<link rel="stylesheet" href="http://mrthink.net/demo/css/base.css" />
<link rel="shortcut icon" type="image/x-icon" href="http://mrthink.net/wp-content/themes/zsofa/favicon.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
/*demo css*/
#demo h2{background:#a40000; font-size:12px; color:#fff; font-weight:normal; text-align:center; width:100px; height:25px;line-height:25px; margin:30px 0 0 20px}
#demo ul{width:800px; height:300px; background:#eee; overflow:hidden;margin-bottom:20px;border:2px solid #a40000}
#demo li{height:30px;text-indent:15px; font-size:12px; line-height:30px;list-style:none}
#demo {height:300px;overflow:hidden;}
</style>
<script>
$(function(){
	//单行应用@Mr.Think
	var _wrap=$("#demo");//定义滚动区域
	var _interval=1000;//定义滚动间隙时间
	var _moving;//需要清除的动画
	_wrap.hover(function(){
		clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
	},function(){
		_moving=setInterval(function(){
			var _field=_wrap.find('ul:first');//此变量不可放置于函数起始处,li:first取值是变化的
			var _h=_field.height();//取得每次滚动高度
			_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
				_field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
			})
		},_interval)//滚动间隔时间取决于_interval
	}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
});
</script>
</head>
<body>

<div id="demo">
	<ul style=" width:800px; height:400px;">
		<li style="float:left;"><img  src="imgs/index_2.png"></li>
		<li style=" float:left;"><img  src="imgs/index-3.png"></li>
	</ul>
	<ul style=" width:800px; height:400px;">
		<li style="float:left;"><img src="imgs/index_2.png"></li>
		<li style="float:left;"><img  src="imgs/index-3.png"></li>
	</ul>
</div>

</body>
</html>