H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】jq轮播器的问题

html======
<!doctype html>
<html lang=”en”>
<head>

<title>Document</title>
<link rel=”stylesheet” href=”css/demo.css”>
</head>
<body>

1
2
3

</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定位的代码

本文地址:H5W3 » 【Web前端问题】jq轮播器的问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址