两种用jq实现的轮播图（向左右滑动和淡出效果）

最新推荐文章于 2024-08-27 19:30:26 发布

阿土姐姐

最新推荐文章于 2024-08-27 19:30:26 发布

阅读量4.4k

点赞数 2

分类专栏： javascript 文章标签： javascript html 轮播图

本文链接：https://blog.csdn.net/fandongyuan521/article/details/70328108

版权

本文介绍了如何利用jQuery分别实现两种轮播图效果：一种是通过改变`margin-left`实现的左右滑动，另一种是通过`fadeOut`和`fadeIn`实现的淡入淡出效果。文章对比了两种方法在元素布局和主要JavaScript函数上的不同，并邀请读者进行讨论和指正。

摘要由CSDN通过智能技术生成

1、首先是左右滑动效果

html：

<div class="slider-left" >
   <ul class="slider-left-main">
      <li class="slider-left-panel"><a><img src="/images/banner1.jpg"/></a> </li>
      <li class="slider-left-panel"><a><img src="/images/banner2.jpg"></a></li>
      <li class="slider-left-panel"><a><img src="/images/banner3.jpg"></a></li>
   </ul>
   <div class="slider-left-extra">
      <ul class="slider-left-nav">
         <li class="slider-left-item">1</li>
         <li class="slider-left-item">2</li>
         <li class="slider-left-item">3</li>
      </ul>
      <div class="slider-left-page">
         <a class="slider-left-pre" href="javascript:return;"></a>
         <a class="slider-left-next" href="javascript:return;"></a>
      </div>
   </div>
</div>

css：

a {  text-decoration: none;  }
ul {  list-style: outside none none;  }
.slider-left  .slider-left-panel img, .slider-left-extra {  width: 100%;  height: 440px;  }
.slider-left-panel {
 width: 1519.2px;  height: 440px; }
.slider-left-panel img {
 width: 100%;  height: 440px; }
.slider-left-main {
 width: 4557.6px;  height: 440px;     position: