轮播图fade

Posted 2021-03-15 10yearsmanong

<style>
.carousel {

    width: 100%;
    height: 420px;
    padding: 0px;
    margin: 0 auto;
    position: relative;
    &:hover{
      .carousel-btn-direction{
        display: block;
      }
    }

}

  
  .carousel-imgs {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    list-style: none;
    background: white;
  }
  
  .carousel-imgs li {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    opacity: 0;
  }
  
  .carousel-imgs a {
    text-decoration: none;
    display: block;
    height: 100%;
  }
  
  .carousel-imgs img {
    width: 100%;
    height: 100%;
  }
  
  .carousel-btn-direction{
    z-index: 50;
    position: absolute;
    top: 45%;
    width: 50px;
    height: 50px;
            border: 0px;
    outline: none;
    background: rgba(0, 0, 0, 0.4);
    text-align: center;
    color: white;
    font-size: 34px;
    font-family: "consolas";
    border-radius: 50%;
    cursor: pointer;
    display: none;
  }
  
  .carousel-btn-left {
      left:50px;
  }

     .carousel-btn-right{
      right:50px;
     }
  
  .carousel-btns button:hover {
    background: rgba(0, 0, 0, 0.5);
  }
  
  .carousel-btn-left {
    float: left;
  }
  
  .carousel-btn-right {
    float: right;
  }

</style>
<div class="carousel" >

<ul class="carousel-imgs">
            <li>
              <a href="#"><img src="assets/images/1.jpg"  /></a>
            </li>
            <li>
              <a href="#"><img src="assets/images/2.jpeg"  /></a>
            </li>
            <li>
              <a href="#"><img src="assets/images/3.jpeg"  /></a>
            </li>
</ul>
<button type="button" class="carousel-btn-direction carousel-btn-left">&gt;</button>
<button type="button" class="carousel-btn-direction carousel-btn-right">&lt;</button>
    </div> 

<script>

$(function(){

  carousel();
})

function carousel() {

    /* 获取元素对象 */
    var $carousel = $(".carousel");
    var $imgs = $(".carousel-imgs li");
    var $btnL = $(".carousel-btn-left");
    var $btnR = $(".carousel-btn-right");
    /* 创建导航按钮 */
    var $item_group = $("<ul></ul>");
    $item_group.attr("class", "carousel-items");
    $imgs.each(function() {
      $item_group.append("<li></li>");
    });
    $carousel.append($item_group);
    /* 样式初始化 */
    $item_group.css({
      "padding": "0px",
      "margin": "0px",
      "list-style": "none",
      "width": "auto",
      "z-index": "50",
      "position": "absolute",
      "bottom":"30px"
    });
    $item_group.children().css({
      "width": "40px",
      "height": "3px",
      "padding": "0px",
      "margin": "5px",
      "background": "#fff",
      "opacity": "0.6",
      "cursor": "pointer",
      "float": "left"
    });
    /* 初始展示位置 */
    var index = 0;
    var $items = $(".carousel-items li");
    $items.eq(index).css("background", "rgba(0, 0, 0, 0.4)");
    $imgs.eq(index).css("opacity", "1");
    $imgs.eq(index).css("z-index", "20");
    var $w=$(window).width();
    var $nowWidth=$(".carousel-items").width();
    var $nowCenter=($w-$nowWidth)/2;
    $item_group.css("left",$nowCenter);
    /* 按钮点击动作 */
    $btnL.click(function() {
      imgAnimator(false);
    });

    $btnR.click(function() {
      imgAnimator(true);
    });

    $items.click(function() {
      imgAnimator(true, $items.index($(this)));
    });
    setInterval(imgAnimator(true, index++), 3000);
    /* 图像动画 */
    function imgAnimator(toNext, select) {
      if(select != null) {
        index = select;
      } else if(toNext == true) {
        index = ($imgs.length + index + 1) % $imgs.length;
      } else if(toNext == false) {
        index = ($imgs.length + index - 1) % $imgs.length;
      }

      $items.css("background", "white");
      $items.eq(index).css("background", "rgba(0, 0, 0, 0.4)");

      $imgs.eq(index).css("z-index", 20);
      /*淡入淡出*/
      $imgs.eq(index).animate({
        "opacity": "1"
      }, "slow", function() {
        $imgs.css("z-index", "0");
        $imgs.css("opacity", "0");
        $imgs.eq(index).css("z-index", 10);
        $imgs.eq(index).css("opacity", "1");
      });
    }
  }

</script>

本文转载于:猿2048?https://www.mk2048.com/blog/blog.php?id=haac022b2ib