js 循环滚动

最新推荐文章于 2024-03-28 22:39:07 发布

Zoe_Wang_ing

最新推荐文章于 2024-03-28 22:39:07 发布

阅读量740

点赞数

分类专栏： html css jquery

本文链接：https://blog.csdn.net/Zoe_Wang_ing/article/details/14518721

版权

css 同时被 3 个专栏收录

82 篇文章 0 订阅

订阅专栏

html

76 篇文章 0 订阅

订阅专栏

jquery

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="learn/jquery-1.8.3.js"></script>
<title>上下滚动</title>
<style>
body{
	margin:0;
	padding:0;
}
div{
	width:306px;
	height:128px;
	margin:50px auto auto auto;
	padding:0;
	position:relative;
	overflow:hidden;
}

ul{
	margin:0;
	padding:0;
	width:9999em;
}
ul li{
	padding:0;
	margin:0;
	width:100px;
	height:40px;
	border:1px solid #00F;
	position: relative;
	float:left;
}

</style>
</head>

<body>
<div class="gd">
    <ul>
        <li class="active">1</li>
        <li>12</li>
        <li>123</li>
        <li>1234</li>
        <li>12345</li>
        <li>123456</li>
        <li>1234567</li>
        <li>12345678</li>
        <li>123456789</li>
        <li>1</li>
        <li>12</li>
        <li>123</li>
    </ul>
</div>


<script type="text/javascript">
$(function(){
	var timer = setInterval(function(){autoUp();},2000)
	var callboard=$('.gd');
	callboard.mouseenter(function (){ 
			clearTimeout(timer); 
	}).mouseleave(function (){ 
			timer = setInterval(function(){autoUp();},2000)
	}); 
});	
	var autoUp = function(){
		
		$('.active').animate({marginLeft:-102},1000,function(){
				var next = $('ul').find('.active').next();
				$('ul').find('.active').addClass('pre').removeClass('active');
				next.addClass('active');
				$('.pre').appendTo($('.active').parent()).removeClass('pre').css({marginLeft:0});
		});
	}
</script>

</body>
</html>

var timer = setInterval(function(){autoUp();},2000)

这个时间秒数必须大于animate 里的时间

和同事一同写的

Zoe_Wang_ing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 循环滚动

上下滚动body{ margin:0; padding:0;}div{ width:306px; height:128px; margin:50px auto auto auto; padding:0; position:relative; overflow:hidden;}ul{ margin:0; padding:0; width:9999em;}ul
复制链接

扫一扫