jQuery实现轮播图（淡入淡出式+无缝滑动式）

最新推荐文章于 2021-12-26 16:18:12 发布

Dilomen

最新推荐文章于 2021-12-26 16:18:12 发布

阅读量4.2k

点赞数 2

分类专栏：练习文章标签： jQuery

本文链接：https://blog.csdn.net/Dilomen/article/details/80233324

版权

练习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

淡入淡出式

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <title></title>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" charset="utf-8"></script>
<style>
  .pic{
    position: relative;
  }
  img{
    position: absolute;
    width:700px;
    height:400px;
    display: none;
  }
</style>
<body>
<div class="pic">
  <img src="你的图片1" alt="图片">
  <img src="你的图片2" alt="图片">
  <img src="你的图片3" alt="图片">
  <img src="你的图片4" alt="图片">
</div>
</body>
<script >
  $(function(){
    var index = -1;
    var pic = $('.pic>img');
    var length = pic.length;
    var transform = function(){
      if(index === length - 1){
        index = 0;
      }else{
        index++;
      }
      pic.eq(index - 1).fadeOut(2000);
      pic.eq(index).fadeIn(2000);
    };
    transform();
    setInterval(transform,3000);
  });
</script>
</html>

无缝滑动式

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<style media="screen">
  .pic{
    width: 700px;
    height: 400px;
    position: relative;
    top:0;
    left: 0;
    overflow: hidden;
  }

  .pic_content{
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
  }
  .pic_content img{
    height: 100%;
    float: left;
  }
</style>
<body>

<div class="pic">
  <div class="pic_content">
    <!--在第一章图前添加第四张图的内容，在第最后一张图后添加第一张图的内容-->
    <img src="你的图片4" alt="图片4">
    <img src="你的图片1" alt="图片1">
    <img src="你的图片2" alt="图片2">
    <img src="你的图片3" alt="图片3">
    <img src="你的图片4" alt="图片4">
    <img src="你的图片1" alt="图片1">
  </div>
</div>
</body>
<script>
  //图片展示
  $(function () {
    var pic_content = $(".pic_content");
    var Img = $(".pic img");
    var Width = $(".pic").width();
    Img.width(Width);
    var picturelength = Img.length;
    var picWidth = Width * picturelength;
    var index = 0;
    pic_content.width(picWidth);
    picMove();
    setInterval(picMove, 5000); //必须大于动画执行时长

    function picMove() {
      index++;
      if (index === picturelength) {
        index = 1;
        $(".pic_content").css("left", -Width + "px");
        index = 2;
      } else if (index === -1) {
        index = picturelength - 1;
        $(".pic_content").css("left", -index * Width + "px");
        index = picturelength - 2;
      }
      $(".pic_content").animate({"left": -index * Width + "px"}, 3000);
    }
  });
</script>
</html>

Dilomen

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
jQuery实现轮播图（淡入淡出式+无缝滑动式）

淡入淡出式&lt;!DOCTYPE html&gt;&lt;html lang="en" dir="ltr"&gt;&lt;head&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;meta charset=&quot
复制链接

扫一扫