新闻无缝滚动左右

最新推荐文章于 2021-07-14 10:19:41 发布

阿聪世家

最新推荐文章于 2021-07-14 10:19:41 发布

阅读量2k

点赞数

分类专栏：网站常用jquery效果各种焦点图滚动效果文章标签： web前端开发 jQuery

本文链接：https://blog.csdn.net/congcong875/article/details/49384937

版权

网站常用jquery效果同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

各种焦点图滚动效果

11 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<title>新闻无缝滚动  左右</title>
<meta charset="utf-8">
<style type="text/css">  
            * {padding:0px; margin:0px;}  
			.box{width:300px;height:30px;line-height30px;position:relative;overflow:hidden;}
            .roll {width:1200px;position:absolute;left:0;top:0; }  
            .roll li{color:#fff;width:200px;line-height30px;height:30px;float:left; text-align:center;}  
           
        </style>  
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
</head>
<body>
			<div class="box">
				 <ul class="roll">  
					<li><a href="http://www.875.cn/" target="_blank">哇哈哈哈哈哈哈哈哈</a></li>
					<li><a href="http://www.875.cn/" target="_blank">1哇哈哈哈哈哈哈哈哈</a></li>
					<li><a href="http://www.875.cn/" target="_blank">2哇哈哈哈哈哈哈哈哈</a></li>
					<li><a href="http://www.875.cn/" target="_blank">3哇哈哈哈哈哈哈哈哈</a></li>
					<li><a href="http://www.875.cn/" target="_blank">3哇哈哈哈哈哈哈哈哈</a></li>
					<li><a href="http://www.875.cn/" target="_blank">哇哈哈哈哈哈哈哈哈</a></li>
					<li><a href="http://www.875.cn/" target="_blank">1哇哈哈哈哈哈哈哈哈</a></li>
					<li><a href="http://www.875.cn/" target="_blank">2哇哈哈哈哈哈哈哈哈</a></li>
					<li><a href="http://www.875.cn/" target="_blank">3哇哈哈哈哈哈哈哈哈</a></li>
					<li><a href="http://www.875.cn/" target="_blank">3哇哈哈哈哈哈哈哈哈</a></li>
					
				</ul>       
           </div>
<script type="text/javascript">
	$(function(){
		var  num = 0;
		function goLeft(){
			if (num == -600){
			   num =0;
			}
			num -= 1;
			$(".roll").css({left:num})
		}
		var timer =	setInterval(goLeft,20);
		$(".box").hover(function(){
			clearInterval(timer);
		},function(){
			timer =	setInterval(goLeft,20);
	});
		
		
		});
</script>

</body>
</html>