<style>
ul {
list-style: none;
}
li {
width: 300px;
height: 300px;
display: none;
}
img {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<ul>
<li>
<img src="./imgs/feizhou.jpg" alt="">
</li>
<li>
<img src="./imgs/xinkong.jpg" alt="">
</li>
<li>
<img src="./imgs/jd.jpg" alt="">
</li>
</ul>
<script>
var len = 0;
var id = null;
var li = document.getElementsByTagName("li");
var btn = document.getElementsByTagName("button");
li[0].style.display = "block";
// 页面起初就自动轮播
time()
// 左边按钮切换
btn[0].onclick = function () {
clearInterval(id);
len--;
if (len < 0) {
len = li.length - 1;
}
paita();
time();
}
// 右边按钮切换
btn[1].onclick = function () {
clearInterval(id);
len++;
if (len > li.length - 1) {
len = 0;
}
paita();
time();
}
// 自动轮播封装
function time() {
id = setInterval(function () {
if (len < li.length - 1) {
len++;
} else {
len = 0
}
paita()
}, 2000)
}
// 排他封装
function paita() {
for (let i = 0; i < li.length; i++) {
li[i].style.display = "none"
}
li[len].style.display = "block"
}
</script>
扫一扫
580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
