使用jQuery怎么实现一个淡入淡出图片轮播效果

发布时间：2021-05-11 18:17:12 阅读：203 作者：Leah 栏目：web开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

这篇文章给大家介绍使用jQuery怎么实现一个淡入淡出图片轮播效果，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

jquery是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

1.HTML 框架搭建（css代码里宽高的大小与图片的大小一致）

css部分：

<style>
  * {
    padding: 0;
    margin:0;
  }
  ul {
    list-style: none;
  }
  .out {
    width: 640px;
    height: 270px;
    margin:50px auto;
    position: relative;
  }
  .out img{
    width: 640px;
    height: 270px;
  }
  .out .img li {
    position: absolute;
    left:0;
    top:0;
    display: none;
  }
  .out .num {
    position: absolute;
    bottom: 20px;
    left: 0;
    font-size:0px;
    text-align:center;
    width: 100%;
  }
  .out .num li {
    width: 20px;
    height: 20px;
    line-height:20px;
    border-radius:50%;
    background:#666;
    color: #fff;
    text-align:center;
    display: inline-block;
    font-size:16px;
    margin:0 3px;
    cursor: pointer;
  }
  .out .num li.active {
    background:#a00;
  }
  .out .btn {
    position:absolute;
    top: 50%;
    margin-top:-30px;
    width: 30px;
    height: 60px;
    line-height:60px;
    background:rgba(0, 0, 0, 0.5);
    font-size:40px;
    color: #fff;
    text-align:center;
    display: none;
  }
  .out .left {
    left: 0;
  }
  .out .right {
    right: 0;
  }
  .out:hover .btn {
    display: block;
    cursor: pointer;
  }
</style>

HTML部分：

<body>
  <div class="out ">
    <ul class="img ">
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="image/1.jpg " alt=" ">
        </a>
      </li>
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="image/2.jpg " alt=" ">
        </a>
      </li>
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="image/3.jpg " alt=" ">
        </a>
      </li>
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="image/4.jpg " alt=" ">
        </a>
      </li>
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="image/5.jpg " alt=" ">
        </a>
      </li>
    </ul>
    <ul class="num ">
    </ul>
    <div class="left btn ">
      <</div>
        <div class="right btn ">></div>
    </div>
</body>

juery代码实现图片的自动轮播和手动轮播效果

<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript">
 $(function() {
   //代码初始化
    var size=$(".img li").size();
    for (var i = 1; i <= size; i++) {
      var li="<li>"+i+"</li>";
      $(".num").append(li);
    };
    //手动控制轮播效果
    $(".img li").eq(0).show();
    $(".num li").eq(0).addClass("active");
    $(".num li").mouseover(function() {
      $(this).addClass("active").siblings().removeClass("active");
      var index = $(this).index();
      i=index;
      $(".img li").eq(index).fadeIn(300).siblings().fadeOut(300);
    })
    //自动
    var i = 0;
    var t = setInterval(move, 1500);
    //核心向左的函数
    function moveLeft() {
      i--;
      if (i == -1) {
         i = size-1;
      }
      $(".num li").eq(i).addClass("active").siblings().removeClass("active");
      $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
    }
    //核心向右的函数
    function move() {
      i++;
      if (i == size) {
        i = 0;
      }
      $(".num li").eq(i).addClass("active").siblings().removeClass("active");
      $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
    }
    //定时器的开始与结束
    $(".out").hover(function() {
      clearInterval(t);
    }, function() {
      t = setInterval(move, 1500)
    })
    //左边按钮的点击事件
    $(".out .left").click(function() {
      moveLeft();
    })
    //右边按钮的点击事件
    $(".out .right").click(function() {
      move();
    })
  })
</script>

这里使用本站演示图片，构建完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net jQuery淡入淡出轮播图</title>
<style>
  * {
    padding: 0;
    margin:0;
  }
  ul {
    list-style: none;
  }
  .out {
    width: 640px;
    height: 270px;
    margin:50px auto;
    position: relative;
  }
  .out .img li {
    position: absolute;
    left:0;
    top:0;
    display: none;
  }
  .out .num {
    position: absolute;
    bottom: 20px;
    left: 0;
    font-size:0px;
    text-align:center;
    width: 100%;
  }
  .out .num li {
    width: 20px;
    height: 20px;
    line-height:20px;
    border-radius:50%;
    background:#666;
    color: #fff;
    text-align:center;
    display: inline-block;
    font-size:16px;
    margin:0 3px;
    cursor: pointer;
  }
  .out .num li.active {
    background:#a00;
  }
  .out .btn {
    position:absolute;
    top: 50%;
    margin-top:-30px;
    width: 30px;
    height: 60px;
    line-height:60px;
    background:rgba(0, 0, 0, 0.5);
    font-size:40px;
    color: #fff;
    text-align:center;
    display: none;
  }
  .out .left {
    left: 0;
  }
  .out .right {
    right: 0;
  }
  .out:hover .btn {
    display: block;
    cursor: pointer;
  }
</style>
</head>
<body>
  <div class="out ">
    <ul class="img ">
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Guardians-of-the-Galaxy-Poster-High-Res.jpg" alt=" ">
        </a>
      </li>
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg" alt=" ">
        </a>
      </li>
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg" alt=" ">
        </a>
      </li>
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg" alt=" ">
        </a>
      </li>
      <li>
        <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg" alt=" ">
        </a>
      </li>
    </ul>
    <ul class="num ">
    </ul>
    <div class="left btn ">
      <</div>
        <div class="right btn ">></div>
    </div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
 $(function() {
   //代码初始化
    var size=$(".img li").size();
    for (var i = 1; i <= size; i++) {
      var li="<li>"+i+"</li>";
      $(".num").append(li);
    };
    //手动控制轮播效果
    $(".img li").eq(0).show();
    $(".num li").eq(0).addClass("active");
    $(".num li").mouseover(function() {
      $(this).addClass("active").siblings().removeClass("active");
      var index = $(this).index();
      i=index;
      $(".img li").eq(index).fadeIn(300).siblings().fadeOut(300);
    })
    //自动
    var i = 0;
    var t = setInterval(move, 1500);
    //核心向左的函数
    function moveLeft() {
      i--;
      if (i == -1) {
         i = size-1;
      }
      $(".num li").eq(i).addClass("active").siblings().removeClass("active");
      $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
    }
    //核心向右的函数
    function move() {
      i++;
      if (i == size) {
        i = 0;
      }
      $(".num li").eq(i).addClass("active").siblings().removeClass("active");
      $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
    }
    //定时器的开始与结束
    $(".out").hover(function() {
      clearInterval(t);
    }, function() {
      t = setInterval(move, 1500)
    })
    //左边按钮的点击事件
    $(".out .left").click(function() {
      moveLeft();
    })
    //右边按钮的点击事件
    $(".out .right").click(function() {
      move();
    })
  })
</script>
</body>
</html>

关于使用jQuery怎么实现一个淡入淡出图片轮播效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

使用jQuery怎么实现一个淡入淡出图片轮播效果

jquery是什么

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签