CSs两张图片轮换是指在一个网页中,两张图片交替显示,让网页效果更加生动。下面是一段实现这个效果的代码,代码使用pre标签: <div class= slider > &a
CSs两张图片轮换是指在一个网页中,两张图片交替显示,让网页效果更加生动。下面是一段实现这个效果的代码,代码使用pre标签:
<div class="slider"> <img class="slide" src="image1.jpg" alt="image1"> <img class="slide" src="image2.jpg" alt="image2"> </div> <style> .slider { width: 500px; height: 300px; overflow: hidden; } .slide { width: 500px; height: 300px; display: none; } .active { display: block; } </style> <script> $(document).ready(function() { setInterval(function() { var currentSlide = $('.active'); var nextSlide = currentSlide.next(); if (nextSlide.length === 0) { nextSlide = $('.slide').first(); } currentSlide.removeClass('active'); nextSlide.addClass('active'); }, 5000); }); </script>
在上面的代码中,我们创建了一个div来包含两张图片,并设置其为隐藏。然后,我们为.active类设置了display: block,这样可以让其中的一张图片显示。在JavaScript部分,我们使用setInterval函数在5秒钟后切换到下一张图片,并为其添加或删除.active类来控制其显示。
粉丝
0
关注
0
收藏
0