<!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>