使用jQuery实现的简单滚动新闻功能

最新推荐文章于 2023-03-28 11:22:56 发布

phh1989

最新推荐文章于 2023-03-28 11:22:56 发布

阅读量2.2k

点赞数

分类专栏： javascript 文章标签： jquery function class div xhtml html

本文链接：https://blog.csdn.net/phh1989/article/details/6563724

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该博客展示了如何使用jQuery实现一个简单的滚动新闻功能。通过定义变量和函数，结合CSS样式，实现在网页上自动和手动切换新闻条目的效果。用户可以通过鼠标悬停暂停自动滚动，并通过按钮进行前后切换。

摘要由CSDN通过智能技术生成

<!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" />
<title>asd</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	var index=0;//位置
	var isAuto=true;//是否自动
	var isScroll=false;//是否正在滚动
	jQuery(function(){
		add();
		var PhotoTimer = setInterval("AutoScroll()",1500);
		jQuery(".btn1").click(function(){
			index=index+380>=1900?1900:index+380;
			scrollNews(index);
		});
		jQuery(".btn2").click(function(){
			index=index-380<=0?0:index-380;
			scrollNews(index);
		});
	});
	var next = true;//是否往前滚动
	function AutoScroll(){
		if(isAuto&&isScroll==false){
			if(next){
				index+=380;
				next=index>=1900?false:true;
			}else{
				index-=380;
				next=index<=0?true:false;
			}
			scrollNews(index);
		}
	}
	function scrollNews(index){
		isScroll = true;
		jQuery('#box').stop(true,true).
			animate({scrollLeft: index}, 800, '',function(){isScroll = false;});
	}function add(){
		jQuery(".newsPanel").append('<div class="news" οnmοuseοver="isAuto=false;" '
				+'οnmοuseοut="isAuto=true;"><a href="#" mce_href="#">'
				+'1央讯：胡锦涛访问乌克兰 会见亚努科维奇总统</a><span>06-11</span></div>');
		jQuery(".newsPanel").append('<div class="news" οnmοuseοver="isAuto=false;" '
				+'οnmοuseοut="isAuto=true;"><a href="#" mce_href="#">'
				+'2央讯：胡锦涛访问乌克兰 会见亚努科维奇总统</a><span>06-12</span></div>');
		jQuery(".newsPanel").append('<div class="news" οnmοuseοver="isAuto=false;" '
				+'οnmοuseοut="isAuto=true;"><a href="#" mce_href="#">'
				+'3央讯：胡锦涛访问乌克兰 会见亚努科维奇总统</a><span>06-13</span></div>');
		jQuery(".newsPanel").append('<div class="news" οnmοuseοver="isAuto=false;" '
				+'οnmοuseοut="isAuto=true;"><a href="#" mce_href="#">'
				+'4央讯：胡锦涛访问乌克兰 会见亚努科维奇总统</a><span>06-14</span></div>');
		jQuery(".newsPanel").append('<div class="news" οnmοuseοver="isAuto=false;" '
				+'οnmοuseοut="isAuto=true;"><a href="#" mce_href="#">'
				+'5央讯：胡锦涛访问乌克兰 会见亚努科维奇总统</a><span>06-15</span></div>');
		jQuery(".newsPanel").append('<div class="news" οnmοuseοver="isAuto=false;" '
				+'οnmοuseοut="isAuto=true;"><a href="#" mce_href="#">'
				+'6央讯：胡锦涛访问乌克兰 会见亚努科维奇总统</a><span>06-16</span></div>');}
</script>
<style>
<!--
.box {
	width: 380px;
	height: 30px;
	overflow: hidden;
	line-height: 30px
}

.newsPanel {
	width: 2400px;
	line-height: 30px
}

.news {
	height: 26px;
	width: 376px;
	margin: 2px;
	float: left;
}
-->
</style>
</head>
<body>
<div id="box" class="box">
<div class="newsPanel"></div>
</div>
<button class="btn1" οnmοuseοver="isAuto=false;"
	οnmοuseοut="isAuto=true;">next</button>
<button class="btn2" οnmοuseοver="isAuto=false;"
	οnmοuseοut="isAuto=true;">pre</button>
</body>
</html>