文字轮播无缝滚动

最新推荐文章于 2021-07-01 19:34:45 发布

kaikai4

最新推荐文章于 2021-07-01 19:34:45 发布

阅读量647

点赞数

分类专栏： js

js 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>文字轮播无缝滚动</title>
	<style>
		a{text-decoration:none; color:inherit;}
		ul{margin:0; padding:0;}
		ul li{list-style:none;}
		.scroll-txt{width:350px; height:30px; border:1px solid #ccc; color:#484848; position:relative;  overflow:hidden;}
		.scroll-txt .font-inner{position:absolute; left:8px; top:0;}
		.scroll-txt .font-inner li{height:30px; line-height:30px;}
		.scroll-txt .dot{position:absolute; right:10px; top:5px; font-size:18px; font-weight:bold;}
		.scroll-txt a:hover{color:#0C6796;}
	</style>
</head>
<body>
	<div class="scroll-txt">
		<ul class="font-inner">
			<li><a href="#">1、调用两条新闻并设定时间上下切换</a></li>
			<li><a href="#">2、调用两条新闻并设定时间上下切换</a></li>
			<li><a href="#">3、调用两条新闻并设定时间上下切换</a></li>
			<li><a href="#">4、调用两条新闻并设定时间上下切换</a></li>
			<li><a href="#">5、调用两条新闻并设定时间上下切换</a></li>
		</ul>
		<div class="dot">
			<a href="javascript:void(0)" class="lt"><</a>
			<a href="javascript:void(0)" class="gt">></a>
		</div>
	</div>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
		$(document).ready(function(){
			var index = 0;
			var autoTimer = 0;//全局变量 目的实现左右点击同步
			var clickEndFlag = true;//设置每条走完才能再点击

			var oInner = $(".font-inner");
			var oLi = $(".font-inner li");

			//克隆第一个放到最后（实现无缝）
			oLi.eq(0).clone(true).appendTo(oInner);

			//alert(oLi.length);//5
			//alert($(".font-inner li").length);//6

			var liHeight = $(".scroll-txt").height();//获取视口的高度
			var totalHeight = (oLi.length * oLi.eq(0).height());//获取li的总高度

			//给ul赋值高度
			oInner.height(totalHeight);
			function tab(){
				oInner.stop().animate({
					top: -index * liHeight
				},400,function(){
					clickEndFlag = true;//上一条走完才为true
					if(index == oLi.length) {
						oInner.css({top: 0});
						index = 0;
					}
				})
			}
			function next() {
				index++;
				if(index > oLi.length) {
					index = 0;
				}
				tab();
			}
			function prev() {
				index--;
				if(index < 0) {
					index = oLi.size() -1;//因为index的0 == 第一个Li，减1也就是_index = Li的长度减1
					oInner.css("top",- oLi.size() * liHeight);//当_index为-1时执行这条，也就是走到li的最后一个
				}
				tab();
			}
			//切换到下一条
			$(".scroll-txt .gt").on("click", function() {
				if(clickEndFlag){
					next();
					clickEndFlag = false;
				}
			});
			//切换到上一条
			$(".scroll-txt .lt").on("click", function() {
				if(clickEndFlag){
					prev();
					clickEndFlag = false;
				}
			});
			//自动轮播
			autoTimer = setInterval(next,3000);
			$(".font-inner a").hover(function(){
				clearInterval(autoTimer);
			},function() {
				autoTimer = setInterval(next,3000);
			});
			//鼠标放到左右方向时关闭定时器
			$(".scroll-txt .lt,.scroll-txt .gt").hover(function(){
				clearInterval(autoTimer);
			},function(){
				autoTimer = setInterval(next,3000);
			});
		});
	</script>
</body>
</html>