基于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怎么实现简单轮播图效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。