自动滚动一个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>
[解决办法]
每次显示一个从下向上滚动
<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>
[解决办法]
水平无缝滚动
- HTML code
<!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>