<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title></title>
<style>
.myDiv{
width:300px;height:40px;overflow: hidden;border:1px solid red;
}
ul{
list-style:none;
position: relative;
top:0;
}
ul li{
height:40px;
cursor: pointer;
}
span{
font-size:20px;
line-height:50px;
position: relative;
left:250px;
top:-45px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="myDiv">
<ul>
<li>1.新闻标题一</li>
<li>2.新闻标题二</li>
<li>3.新闻标题三</li>
<li>4.新闻标题四</li>
<li>5.新闻标题五</li>
</ul>
</div>
<span class="lt"><</span>
<span class="gt">></span>
</body>
<script src = "js/jquery-1.4.2.min.js"></script>
<script>
$(function(){
var timer = null;//初始化定时器
var index = 0;
var Oul = $("ul");
var Oli = $('ul li');
var clickEndFlag = true;//上一条走完才为true
Oli.eq(0).clone(true).appendTo(Oul);//克隆第一个li放到ul的最后
var totalHeight = $('.myDiv').height();//获取视口的高度
var totalLi = Oli.height();//获取每个li的高度
Oul.height(totalHeight);//把视口的高度
function Tip(){
Oul.stop().animate({
top:-index*totalHeight//第一个li的top为0
},400,function(){
clickEndFlag = true;
if(index == Oli.length){
Oul.css({top:0});//将top设置为0,从第一个li开始
index = 0;
}
})
}
function next(){
index++;
if(index > Oli.length){
index = 0;
}
Tip();
};
function prev(){
index--;
if(index < 0){
index = Oli.length-1;
Oul.css('top','-Oli.length*totalHeight');
}
Tip();
};
//下一条
$('.gt').click(function(){
if(clickEndFlag){
next();
clickEndFlag = false;
}
});
$('.lt').click(function(){
if(clickEndFlag){
prev();
clickEndFlag = false;
}
});
//自动
timer = setInterval(next,1000);
//鼠标悬停
Oli.hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(next,1000);
})
$('.gt').hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(next,1000);
});
$('.lt').hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(next,1000);
})
})
</script>
</html>
