js通过opcity来实现轮播

最新推荐文章于 2023-01-03 20:58:06 发布

原创

最新推荐文章于 2023-01-03 20:58:06 发布 · 610 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js opacity 轮播

该博客介绍了一种利用JavaScript的opacity属性来创建轮播效果的方法。通过将多张图片在窗口同一位置叠放，并使用绝对定位，然后通过改变图片的透明度（opacity）来实现轮播的切换。借助定时器控制图片的显示与隐藏，从而达到平滑的轮播视觉体验。

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

思路：通过opcity：0，opcity：1对图片样式的进行切换，结合定时器，控制显示与隐藏，达到轮播的效果。

首先，图片需在窗口的同一位置叠放，可以用绝对定位实现。

通过JS控制opcity属性实现轮播效果，具体实现看代码：

HTML代码:

<div class="banner">
   <div class="banner_div">
      <ul class="banner_ul">
         <li class="banner_ul_li"><a href=""><img src="images/banner.jpg" alt=""></a></li>
         <li class="banner_ul_li"><a href=""><img src="images/banner1.jpg" alt=""></a></li>
         <li class="banner_ul_li"><a href=""><img src="images/banner2.jpg" alt=""></a></li>
         <li class="banner_ul_li"><a href=""><img src="images/banner3.jpg" alt=""></a></li>
      </ul>
      <div class="banner_arrow">
         <a href="javascript:;" id="prev"><img class="banner_arrow_prev" src="images/prev.png" alt=""></a>
         <a href="javascript:;" id="next"><img  class="banner_arrow_next" src="images/next.png" alt=""></a>
      </div>
      <div class="follow">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
      </div>
   </div>
</div>

CSS代码:

.banner_ul_li {
    width: 100%;
    float: left;
    margin-right: -100%;
}
.banner_ul li a img {
    display: block;
    width: 100%;
}
.banner_arrow {
    position: absolute;
    width: 100%;
    top: 45%;
}
.ban