换一批功能

最新推荐文章于 2025-06-25 17:05:13 发布

姚志超

最新推荐文章于 2025-06-25 17:05:13 发布

阅读量3.7k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yaozhichao1/article/details/9072613

本文介绍了一种使用JavaScript实现的简单轮播图效果。通过点击按钮可以在三个不同的div块之间进行切换显示，达到轮播的效果。该方法适用于初学者理解和实践DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击按钮换一批：（假设有3个div块，打开页面默认显示第一个div，点“换一批”按钮，用js读取第二个div替换掉第一个div并显示在网页上，再点一次则用第三个替换掉第二个，再点一次用第一个替换掉第三个……如此循环）
<div id="movie1" style="display:block;">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
<div id="movie2" style="display:none;">
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
</div>
<div id="movie3" style="display:none;">
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
</div>
<input type="button" onclick="javascript:divrefresh();" value="换一批" />
<script type="text/javascript">
function divrefresh(){
var m1=document.getElementById('movie1');
var m2=document.getElementById('movie2');
var m3=document.getElementById('movie3');
if(m1.style.display=='block'){
m1.style.display='none';
m2.style.display='block';
}else if(m2.style.display=='block'){
m2.style.display='none';
m3.style.display='block';
}else{
m3.style.display='none';
m1.style.display='block';
}
}
</script>