Jquery实现图片轮播图(简单的)

样式

<style type="text/css">
  * {
    margin: 0;
    padding: 0;
  }
  ul li {
    list-style: none;
  }

  #main {
    width: 760px;
    height: 300px;
    position: relative;
    margin: 50px auto;
  }

  #main .pic {
    width: 760px;
    height: 300px;

    overflow: hidden;
  }
  #main .pic ul li {
    width: 760px;
    height: 300px;
    position: relative;
  }
  #main .pic ul li .img1 {
    position: absolute;
    top: 0;
    left: -760px;
  }
  #main .pic ul li .img2 {
    position: absolute;
    top: 0;
    left: -20px;
    display: none;
  }
  #main .nav {
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
  #main .nav ul li {
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    float: left;
    margin-left: 5px;
  }
  #main .nav ul li.select {
    background: #fff;
  }
</style>

HTML文本

<div id="main">
      <div class="pic">
        <ul>
          <li style="background: url(img/bg1.jpg);">
            <img class="img1" src="img/text1.png" />
            <img class="img2" src="img/con1.png" />
          </li>
          <li style="background: url(img/bg2.jpg);">
            <img class="img1" src="img/text2.png" />
            <img class="img2" src="img/con2.png" />
          </li>
          <li style="background: url(img/bg3.jpg);">
            <img class="img1" src="img/text3.png" />
            <img class="img2" src="img/con3.png" />
          </li>
          <li style="background: url(img/bg4.jpg);">
            <img class="img1" src="img/text4.png" />
            <img class="img2" src="img/con4.png" />
          </li>
          <li style="background: url(img/bg5.jpg);">
            <img class="img1" src="img/text5.png" />
            <img class="img2" src="img/con5.png" />
          </li>
        </ul>
      </div>
      <div class="nav">
        <ul>
          <li class="select"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <div
      style="width: 100px; height: 100px; background: red; display: none;"
    ></div>
    <script
      src="js/jquery-1.11.3.js"
      type="text/javascript"
      charset="utf-8"
    ></script>

js文本![在这里插入图片描述](https://img-blog.csdnimg.cn/20200612203044693.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmd5YWJpbmcyMDIw,size_16,color_FFFFFF,t_70#pic_center)
<script type="text/javascript">
      $(function () {
        $(".pic li")
          .eq(0)
          .find(".img1")
          .stop()
          .animate({ left: 0 }, 800)
          .next()
          .stop()
          .show()
          .animate({ left: 0 }, 800);
        var i = 0;
        setInterval(function () {
          i++;
          if (i == $(".pic li").length) {
            i = 0;
          }
          $(".pic li")
            .eq(i)
            .fadeIn()
            .find(".img1")
            .stop()
            .animate({ left: 0 }, 800)
            .next()
            .stop()
            .show()
            .animate({ left: 0 }, 800)
            .end()
            .end()
            .siblings()
            .fadeOut()
            .find(".img1")
            .css({ left: "-760px" })
            .next()
            .hide()
            .css({ left: "-20px" });

          $(".nav li")
            .eq(i)
            .addClass("select")
            .siblings()
            .removeClass("select");
        }, 2000);
      });
    </script>

自己改下Jquery路径就可以用