js实现轮播图
程序员文章站
2022-06-02 11:25:42
...
代码实现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<style>
.blue{
width: 200px;
height: 200px;
background-color: blue;
}
.red{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="blue"></div>
<input type="button" class="begin" value="开始">
<input type="button" class="pause " value="暂停">
<script type="text/javascript">
var interval = setInterval(function() {
$("div").toggleClass("red");
}, 200);
//开始
$(function() {
$(".begin").on("click", function() {
interval = setInterval(function() {
$("div").toggleClass("red");
}, 200);
});
});
//暂停
$(function() {
$(".pause").on("click", function() {
clearInterval(interval);
});
});
</script>
</body>
</html>
效果演示
上一篇： JS实现轮播图
下一篇： PHP中的日期及时间