源码搜藏网

本文使用jquery实现轮播图效果，供大家参考，具体内容如下

首先上效果

上代码

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>

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。