自动滚动一个li

ai_笑 2012-07-05 03:21:08

我想在下面的代码实现固定时间滚动一个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>

...全文

191 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

JJYY0088 2012-07-05

打赏
举报

水平无缝滚动



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

ai_笑 2012-07-05

打赏
举报

[Quote=引用 1 楼的回复:]

你要怎么滚动水平，垂直？
[/Quote]水平方向

hch126163 2012-07-05

打赏
举报

　演示地址:http://www.popub.net/script/MSClass.html
　下载地址:http://www.popub.net/script/MSClass.js

那一笑的凄凉 2012-07-05

打赏
举报

每次显示一个从下向上滚动
<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>