使用jquery如何实现图片自动更换而且是定时的
1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid pink;
}
.box img {
display: inline-block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<img src="">
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var imgArr = [
"./img/0.png",
"./img/1.png",
"./img/2.png",
"./img/3.png",
"./img/4.png",
];
$(".box img").attr("src", imgArr[0]);
var i = 0;
setInterval(function () {
i++;
if (i > imgArr.length - 1) {
i = 0
}
$(".box img").attr("src", imgArr[i]);
}, 2000);
})
</script>
</body>
</html>
上面是代码：
实现原理是通过间隔定时器，每过2秒去设置img的src属性。
imgArr是保存图片的数组，当每一张图片都展示后重头再开始
imgArr的值是一张张图片我这里是在img文件夹下放了5张图片，题主可以根据自己的需求选择网上或者本地图片。
代码效果：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
