为什么我用remove移除第一个li，代码也是删除一个，但是每次显示出来第二个就不见了，而且append添加的li总是空出一个来

占卜者 2017-08-11 04:04:04

HTML代码：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

css代码：

body{
overflow-x: hidden;
}
ul{
height: 450px;
width: 2800px;
overflow: hidden;
}
ul li{
height: 450px;
width: 350px;
float: left;
}

.left_an{
animation:left 32s linear;
animation-fill-mode: forwards;
}
@keyframes left {
0%{
transform: translateX(0px);
}
100%{
transform: translateX(-2800px);
}
}

js代码：

var li = document.getElementsByTagName("li");
var index = 0;
var back = ["#4282de","#355ca9","#f2c42d","#f0f272","#db48cb","#8cdb5f","#f2f136","#5d21e7"];
for(var i = 0;i<li.length;i++){
$(li[i]).css({"background":back[i]});
$(li[i]).addClass("left_an");
}
function removeAddLi() {
$(li[0]).remove();
var addLi = $("<li class='left_an'></li>");
$("ul").append(addLi);
$(addLi).css({"background":back[index]});
index++;
if(index == back.length){
index = 0;
}
}

setInterval(function(){
removeAddLi();
},4000);

...全文

171 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2017-08-11

打赏
举报


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
body{
	margin: 0;
    overflow-x: hidden;
}
ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
    height: 450px;
    width: 2800px;
    overflow: hidden;
}
ul li{
    height: 450px;
    width: 350px;
    float: left;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

<script type="text/javascript">
var li = $("li");
var back = ["#4282de","#355ca9","#f2c42d","#f0f272","#db48cb","#8cdb5f","#f2f136","#5d21e7"];
for(var i = 0;i<li.length;i++){
    $(li[i]).css({"background":back[i]});
}
function removeAddLi() {
    $("li").eq(0).animate({marginLeft:"-350px"}, 4000, "linear", function () {
	    $(this).css({marginLeft:"0px"});
    	$("ul").append(this);
    	removeAddLi();
    });
}
removeAddLi()

</script>
</body>
</html>