<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#dv{
width: 223px;
height: 220px;
overflow: hidden; /*隐藏所有*/
border: 1px solid orange; /*边框*/
box-shadow: 5px 5px 5px gray;/*阴影*/
border-radius:10px ;/*圆角*/
}
#dv .im li{
display: inline-block;
}
</style>
</head>
<body>
<div id="dv">
<ul class="im">
<li><img src="images/dianzi01.jpg" alt=""/></li>
<li><img src="images/dianzi02.jpg" alt=""/></li>
<li><img src="images/dianzi03.jpg" alt=""/></li>
<li><img src="images/dianzi04.jpg" alt=""/></li>
<li><img src="images/dianzi05.jpg" alt=""/></li>
<li><img src="images/dianzi06.jpg" alt=""/></li>
</ul>
</div>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
var len = $('.im li').length;//获取长度
// alert(len);
var index=0;//第一个索引
setInterval(function () {
index++;
if(index==len) //如果最后一张
{
index=0;
}
$('.im li').eq(index).css("display","block");//显示当前的
$('.im li').eq(index).siblings().css("display","none");//隐藏其它所有的
},1500);
});
</script>
</html>
简单明了的jquery 图片轮播效果
最新推荐文章于 2021-03-10 15:10:21 发布