<!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> <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的最后 // console.log(Oli.length);//5 // console.log($("ul li").length);//6 var totalHeight=$(".myDiv").height();//获取到视口的高度 var totalLi=Oli.height();//获取每个li的高度 Oul.height(totalHeight);//把视口的高度赋值给ul function tab(){ Oul.stop().animate({ top: -index * totalHeight//第一个li的top为0;第二个li的top为第一个li的高度的负值,第三个li的top为前两个li高度的负值,以此类推 },400,function(){ clickEndFlag = true; if(index==Oli.length){//到最后一个li Oul.css({top:0});//将top设置为0,从第一个li开始 index=0; } }) } function next(){ index++; if(index>Oli.length){ index=0; } tab(); } function prev(){ index--; if(index<0){ index=Oli.size()-1; Oul.css("top",-Oli.size()*totalHeight); } tab(); } //下一条 $("body").find(".gt").on("click",function(){ if(clickEndFlag){ next(); clickEndFlag=false; } }); //上一条 $("body").find(".lt").on("click",function(){ if(clickEndFlag){ prev(); clickEndFlag=false; } }) //自动轮播 timer=setInterval(next,1000); //鼠标悬浮到每个li上时清除定时器 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> </body> </html>