基于jquery怎么实现简单轮播图效果

这篇文章主要介绍“基于Jquery怎么实现简单轮播图效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“基于jquery怎么实现简单轮播图效果”文章能帮助大家解决问题。

首先上效果

上代码

html

<div id="main">    <div class="pic">      <ul>        <li >          <img class="img1" src="img/text1.png" />          <img class="img2" src="img/con1.png" />        </li>        <li >          <img class="img1" src="img/text2.png" />          <img class="img2" src="img/con2.png" />        </li>        <li >          <img class="img1" src="img/text3.png" />          <img class="img2" src="img/con3.png" />        </li>        <li >          <img class="img1" src="img/text4.png" />          <img class="img2" src="img/con4.png" />        </li>        <li >          <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 ></div>

CSS代码

<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;    }

js代码

<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>  <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怎么实现简单轮播图效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。