图片切换之轮播图效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<style>
div {
width: 1024px;
height: 768px;
overflow: hidden;
position: relative;
}
ul {
position: absolute;
bottom: 5px;
right:5px;
width: 200px;
height: 40px;
list-style:none;
}
li{
float: left;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
background: white;
border-radius: 100%;
}
.active {
background: red;
}
</style>
<body>
<div id="ad">
<img src="a.jpg" alt="">
<img src="b.jpg" alt="">
<img src="c.jpg" alt="">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
<script src="jquery.js"></script>
<script>
// 轮播图
var i = 0;
setInterval(function (){
$('#ad img:first').fadeOut(1500 , function(){
$(this).appendTo('#ad').show();
$('li').removeClass('active');
$('li').get(++i%3).className = 'active';
});
} , 3000);
</script>
</html>
1154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
