请问jquery画面轮播的有关问题

请教jquery画面轮播的问题



<ul>

    <li class="picPanel"><img src="1.jpg"></li>

    <li class="picPanel"><img src="2.jpg"></li>

    <li class="picPanel"><img src="3.jpg"></li>

    <li class="picPanel"><img src="4.jpg"></li>

    <li class="picPanel"><img src="5.jpg"></li>

    <li class="picPanel"><img src="6.jpg"></li>

</ul>

现在要求用jquery循环显示li元素中的图片（通过透明度和z-index来显示），当页面加载完成后默认显示第一张图片，然后开始循环显示，我自己写的代码有问题，代码如下：



$(function(){

    $(".picPanel").first().css({opacity:"1", "z-index":"1"});

    var i = 1, t = $(".picPanel").length - 1, tmp = setInterval(function(){

        $(".picPanel").animate({"z-index":"0", opacity:"0"},200).eq(i < t ? i++ : i = 0).animate({"z-index":"1", opacity:"1"},200);

    }, 3000);

});

------解决思路----------------------

<!DOCTYPE html>

<html>

<head>

<title>图片轮播</title>

<style type="text/css" rel="stylesheet">

.page {

	position: absolute;

	width: 200px;

	height: 200px;

}

.div1{

	top: 300px;

	left: 500px;

	background-color: lightcyan;

}

.div2{

	top: 300px;

	left: 600px;

	background-color: lightblue;

}

.div3{

	top: 400px;

	left: 500px;

	background-color: gray;

}

.div4{

	top: 400px;

	left: 600px;

	background-color: tomato;

}


</style>

</head>


<body>

<div id="content">

	<div class="page div1">1</div>

	<div class="page div2">2</div>

	<div class="page div3">3</div>

	<div class="page div4">4</div>

</div>

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>

<script type="text/javascript">

var i = 1;

function scroll(){

	if(i > 4){

		i = 1;

	}

	$(".page").css("z-index", 0);

	$(".div"+i).css("z-index", 1);

	i++;

}

setInterval(scroll, 1000);

</script>

</body>

</html>

这是我当年面试的时候让做的一个简单动画，可笑的是那会儿头昏，没做出来

请问jquery画面轮播的有关问题

相关推荐