Jquery的demo图片切换效果

Posted 2021-04-08 KindJob

图片的切换效果有很多，比较常见的有水平滚动、垂直滚动、淡入淡出等。我们接下来一我们来实现淡入淡出的效果。

首先呢，我们来实现html的代码，很简单。

<div id="container">

<ul class="slider">

<li><img /></li>

<li><img /></li>

<li><img /></li>

<li><img /></li>

<li><img /></li>

</ul>

<ul class="thumb">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

</div>

上面呢，是随便找的几张美女图片，图片都是随机的，这里我先的是本地的，没有引用的图片，所以大家写的时候要注意下格式和路径。

/*   container  */

#container { width: 320px; height: 456px; overflow: hidden; position: relative; margin: 20px auto; }

.slider { position: absolute; }

.slider img { width: 320px; display: block; }

.thumb { position: absolute; bottom: 5px; right: 5px; }

.thumb li { float: left; color: #FF7300; text-align: center; line-height: 16px; width: 16px; height: 16px; font-size: 12px; font-family: Arial; margin: 3px 1px; border: 1px solid #FF7300; background: #fff; cursor: pointer; }

.thumb li:hover,.thumb li.selected { color: #fff; line-height: 16px; width: 16px; height: 16px; font-size: 16px; background: #EF7300; font-weight: bold; }

简单的梳理一下样式之后，我们也就可以给它加上效果了。淡入淡出的效果，相信知道jquery 的朋友都会稍微知道一点的，不复杂，很简单的，fadeOut和fadeIn()就是淡入淡出主要显示的效果。

;(function ($) {

  $.fn.extend({

      fadeInOut:function () {

          var imgCount = $(".slider li").length;

          var imgHeight = $(".slider li").eq(0).height();

          $(".thumb li").eq(0).addClass("selected");

          for (var i=1;i<imgCount;i++){

              $(".slider li").eq(i).css({

"display":"none"

              });

          }

          $(".thumb li").click(function () {

              var theIndex = $(this).index();

              var nowIndex = $(".selected").index();

              $(".thumb li").removeClass("selected");

              $(".thumb li").eq(theIndex).addClass("selected");

              $(".slider li").eq(nowIndex).fadeOut();

              $(".slider li").eq(theIndex).fadeIn();

          });

      }

  });

})(jQuery);

上面还运用了for循环，像这种轮播的话，for循环是肯定少不了 的，所以我们学习jquery的时候，需要多种知识相结合在一起的。