文字轮播无缝滚动

来源：互联网发布：sql group by having 编辑：程序博客网时间：2024/05/29 13:55
<!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);//6var 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;//上一条走完才为trueif(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的长度减1oInner.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>
0 0