html======
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
</body>
</html>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/demo.js"></script>
css====================
*{margin: 0;padding: 0;}
.banner{width: 800px;height: 441px;position: relative;overflow: hidden;margin: 0 auto;}
.banner ul{width: 10000px;height: 441px;z-index: 1;}
.banner ul li{position: absolute;top: 0;left: 0;}
.banner ul li.active{z-index: 4;}
.banner .num{width: 100px;height: 20px;line-height: 20px;position: absolute;left: 350px;top: 400px;z-index: 4;}
.banner .num span{cursor:pointer;}
js=========================
$('.num span').click(function () {
$('.banner img').css('opacity',0);
$('.banner img').eq($(this).text()-1).css('opacity',1);
})
var index=0;
setInterval(move,1000);
function move(index) {
if(index==2){
index=0;
}
$('.banner img').css('opacity',0);
$('.banner img').eq(index).css('opacity',1);
index++;
}
我的理解是图片会自动轮播，但是实际上图片就1秒之后都消失了，为什么
并没有在js中看到控制图片定位的代码，只有让改变样式opacity
题主可以在index自增的时候顺便加上控制ul定位的代码