网页制作中无限循环滚动的图片代码

不是那出一次图片后有个空白，等空白出完了再循环。是第一张图片和最后一张图片也连接在一起出现的那种！谢谢了！... 不是那出一次图片后有个空白，等空白出完了再循环。是第一张图片和最后一张图片也连接在一起出现的那种！谢谢了！展开

 我来答

2个回答

#热议# 空调使用不当可能引发哪些疾病？

drink51
推荐于2016-04-07 · TA获得超过297个赞

知道小有建树答主

回答量：425

采纳率：0%

帮助的人：145万

我也去答题访问个人页

关注

展开全部

我自己用jquery写的纵向的，想要横向的我可以帮你改改。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-

8" />
<title>无标题文档</title>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$(document).ready(function() {
	var height = $("ul li").height();
	var ul = $("ul");
	var picTimer;
	var btn = "<div class='scroll_btn pre'></div><div 

class='scroll_btn next'></div>";
	//$("ul").append(btn);
	$("ul").hover(function() {
		clearInterval(picTimer);
		},function() {
			picTimer = setInterval(
				function() {
					var field = $("ul 

li:first");
						 field.animate

({marginTop:-height+'px'},600,function(){
	  					 field.appendTo

(ul).css('marginTop',0);
						}) 
					},3000
			);
		}).trigger("mouseleave");
		//下一个需要 研究
	$(".pre").click(function() {
		var field = $("ul li:first");
		var lastField = $("ul li:last");
		field.animate({marginTop:height

+'px'},600,function(){
	  	lastField.insertBefore(field);
		});
	});
		
	$(".next").click(function() {
		var field = $("ul li:first");
						 field.animate

({marginTop:-height+'px'},600,function(){
	  					 field.appendTo

(ul).css('marginTop',0);
						}) ;
		});
	});
</script>
<style type="text/css">
* { margin:0px; padding:0px;}
ul { width:200px; height:200px; border:1px solid #030; 

position:relative; overflow:hidden;}
li { list-style:none; width:200px; height:200px; display:block;}
.scroll_btn { width:100px; height:20px; position:absolute; 

background:#000; z-index:100}
.pre { left:10px; top:10px;}
.next { left:10px; bottom:10px;}
</style>
</head>

<body>
<ul>
<li style="background:red"></li>
<li style="background:green"></li>
<li style="background:blue"></li>
<li style="background:yellow"></li>
</ul>
</body>
</html>
记得：<script language="javascript" src="jquery.js"></script>
载入jquery工程 才能看效果


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起