自动滚动一个li

我想在下面的代码实现固定时间滚动一个li  前后要衔接上，大家帮忙下
<div class="culturelist mainblack">
          <ul>
            <li><a href="#"><img src="images/culture001.jpg" width="112" height="84" />特色金牛</a></li>
            <li><a href="#"><img src="images/bxgsimg2.jpg" width="112" height="84" />特色金牛</a></li>
            <li><a href="#"><img src="images/bxgsimg3.jpg" width="112" height="84" />特色金牛</a></li>
            <li><a href="#"><img src="images/bxgsimg4.jpg" width="112" height="84" />特色金牛</a></li>
            <li><a href="#"><img src="images/bxgsimg5.jpg" width="112" height="84" />特色金牛</a></li>
            <li><a href="#"><img src="images/bxgsimg3.jpg" width="112" height="84" />特色金牛</a></li>
            <li><a href="#"><img src="images/bxgsimg4.jpg" width="112" height="84" />特色金牛</a></li>
            <li><a href="#"><img src="images/bxgsimg5.jpg" width="112" height="84" />特色金牛</a></li>
          </ul>

</div>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<script>
var tid;
var pause = false;
var start = function() {
tid = setInterval(slide, 10);
}
var slide = function() {
if (pause) return;
$("#div1").scrollTop($("#div1").scrollTop() + 2);
if ($("#div1").scrollTop() % 22 == 0) {
clearInterval(tid);
$("#div1").append("<li>" + $("#div1 li:first").html() + "</li>");
$("#div1 li:first").remove();
$("#div1").scrollTop("0");
setTimeout(start, 1000);
}
}
$(document).ready(function() {
$("#div1").hover(
           function() { pause = true },
           function() { pause = false }
        );
})
setTimeout(start, 1000);
</script>
<script>
var tid;
var pause = false;
var start = function() {
tid = setInterval(slide, 10);
}
var slide = function() {
if (pause) return;
$("#div1").scrollTop($("#div1").scrollTop() + 2);
if ($("#div1").scrollTop() % 22 == 0) {
clearInterval(tid);
$("#div1").append("<li>" + $("#div1 li:first").html() + "</li>");
$("#div1 li:first").remove();
$("#div1").scrollTop("0");
setTimeout(start, 1000);
}
}
$(document).ready(function() {
$("#div1").hover(
           function() { pause = true },
           function() { pause = false }
        );
})
setTimeout(start, 1000);
</script>
每次显示一个从下向上滚动
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">.scrolltxt_con {display: inline-block;height: 80px;line-height: 50px;margin: 0 0 0 26px;overflow: hidden;}
.scrolltxt_con a:link, .scrolltxt_con a:visited {color: #ff4f00;}
</style>
</head>
<body>
<div  class="scrolltxt_con" id="3gAdvert">
   <ul>
   <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>
   <li><a href="#">特色金牛6</a></li>
   <li><a href="#">特色金牛7</a></li>
   <li><a href="#">特色金牛8</a></li>
   </ul>

</div>
</body>
</html>
<script language="javascript"  type="text/javascript">
    //系统消息滚动
    var Class1 = {
        create: function () {
            return function () {
                this.initialize.apply(this, arguments);
            }
        }
    }
    Function.prototype.bind = function (object) {
        var method = this;
        return function () {
            method.apply(object, arguments);
        }
    }
    var Scroll1 = Class1.create();
    Scroll1.prototype = {
        initialize: function (element, height) {
            this.element = document.getElementById(element);
            //alert(this.element.innerHTML)
            this.element.innerHTML += this.element.innerHTML;
            this.height = height;
            this.maxHeight = this.element.scrollHeight / 2;
            this.counter = 0;
            this.scroll();
            this.timer = "";
            this.element.onmouseover = this.stop.bind(this);
            this.element.onmouseout = function () { this.timer = setTimeout(this.scroll.bind(this), 1000); } .bind(this);
        },
        scroll: function () {
            if (this.element.scrollTop < this.maxHeight) {
                this.element.scrollTop += 3;
                this.counter += 3;
            } else {
                this.element.scrollTop = 0;
                this.counter = 0;
            }            if (this.counter < this.height) {
                this.timer = setTimeout(this.scroll.bind(this), 22);
            } else {
                this.counter = 0;
                this.timer = setTimeout(this.scroll.bind(this), 3126);
            }
        },
        stop: function () {
            clearTimeout(this.timer);
        }
    }
    new Scroll1("3gAdvert", 50);
</script>
　演示地址:http://www.popub.net/script/MSClass.html
　下载地址:http://www.popub.net/script/MSClass.js
水平无缝滚动<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>水平无缝滚动</title>
<style type="text/css">
.culturelist{ border:solid 2px #d5d5d5; width:650px; height:120px; overflow:hidden; padding:5px 0;}
ul,li{margin:0; padding:0; list-style:none;}
ul{display:inline-block; width:50000px;}
img{display:block; margin-bottom:5px; border:0}
li{float:left; text-align:center; margin-left:15px; width:112px; background:yellow;}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var marginl = parseInt($(".culturelist ul li:first").css("margin-left")); //每个图片margin的数值
var movew = $(".culturelist ul li:first").outerWidth()+marginl; //需要滑动的数值 function imgRun(){
$(".culturelist ul li:first").stop(true).animate({"margin-left":-movew},500,function(){
$(this).css("margin-left",marginl).appendTo($(".culturelist ul"));
});
}
setInterval(imgRun,1000);
})
</script>
</head>
<body>
<div class="culturelist mainblack">
    <ul>
        <li><a href="#"><img src="images/culture001.jpg" width="112" height="84" />特色金牛start</a></li>
        <li><a href="#"><img src="images/bxgsimg2.jpg" width="112" height="84" />特色金牛</a></li>
        <li><a href="#"><img src="images/bxgsimg3.jpg" width="112" height="84" />特色金牛</a></li>
        <li><a href="#"><img src="images/bxgsimg4.jpg" width="112" height="84" />特色金牛</a></li>
        <li><a href="#"><img src="images/bxgsimg5.jpg" width="112" height="84" />特色金牛</a></li>
        <li><a href="#"><img src="images/bxgsimg3.jpg" width="112" height="84" />特色金牛</a></li>
        <li><a href="#"><img src="images/bxgsimg4.jpg" width="112" height="84" />特色金牛</a></li>
        <li><a href="#"><img src="images/bxgsimg5.jpg" width="112" height="84" />特色金牛end</a></li>
    </ul>
</div>
</body>
</html>