<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#banner {
width:100%;
height:1000px;
position:relative;
}
#banner ul {
width:100%;
height:100%;
margin:0;
padding:0;
}
#banner ul li a {
display:block;
}
#banner ul li img {
width:1620px;
height:1000px;
/* width:520px;
height:500px; */
}
#banner ul li {
position:absolute;
left:0px;
top:0px;
}
/* #banner .tagle {
width:1600px;
height:57px;
position:absolute;
z-index:999;
top:50%;
margin-top:-40px;
left:50%;
margin-left:-800px;
}
#banner .tagle #prev {
width:45px;
height:60px;
background:url(../img/prev.png);
float:left;
background-size:100% 100%;
}
#banner .tagle #next {
width:45px;
height:60px;
background:url(../img/next.png);
float:right;
background-size:100% 100%;
} */
/* #banner #num {
width:186px;
height:20px;
position:absolute;
z-index:999;
left:50%;
margin-left:-78px;
bottom:42px;
}
#banner #num span {
width:20px;
height:20px;
border-radius:20px;
border:1px solid #e6ddd0;
behavior:url(PIE.htc);
margin-left:16px;
margin-right:16px;
display:inline-block;
}
#banner #num span:hover {
background:#ffffff;
cursor:pointer;
}
#banner #num span.on {
border:1px solid #e6ddd0;
background:#ffffff;
} */
</style>
</head>
<script src="../res/static/js/jquery-1.11.3.js"></script>
<body>
<div id="banner">
<ul>
<li>
<a><img src="./img/1.png"></a>
</li>
<li>
<a><img src="./img/2.png"></a>
</li>
<li>
<a><img src="./img/3.png"></a>
</li>
</ul>
<!-- <div class="tagle">
<a href="javascript:;" id="prev"></a>
<a href="javascript:;" id="next"></a>
</div> -->
<!-- <div id="num">
<span class="on"></span>
<span></span>
<span></span>
</div> -->
</div>
</body>
<script>
$(function() {
/*轮播图*/
//隐藏第一张以外的图片
$('#banner>ul>li:gt(0)').hide();
var n = 0;
var len = $('#banner ul li').length; //获取的是li的长度 数量
var t;
function play() {
//alert(n)
$('#banner ul li').eq(n).show().siblings().hide();
//给当前的span增加on样式,移除
// $('#num span').eq(n).addClass('on').siblings().removeClass('on');
}
function autoPlay() {
//自动播放
t = setInterval(function() {
//alert(1)
n++;
if (n >= len) {
n = 0;
}
play();
}, 1000)
}
//alert(len)
autoPlay(); //调用自动播放函数
//鼠标经过banner停止播放,移开继续播放
// $('#banner').hover(function() {
// clearInterval(t)
// }, function() {
// autoPlay();
// })
// //点击下一张
// $('#next').click(function() {
// n++;
// if (n >= len) {
// n = 0;
// }
// play();
// })
// //点击上一张
// $('#prev').click(function() {
// if (n <= 0) {
// n = len;
// }
// n--;
// play();
// })
// //点击数字显示相应的图片
// $('#num span').each(function(index) {
// //alert(index)
// $(this).click(function() {
// //alert(index)
// n = index;
// play();
// })
// });
})
</script>
</html>
jq不滑动变化的轮播,定时替换内容
最新推荐文章于 2022-04-14 18:37:38 发布