简单实现jQuery轮播效果

本文实例为大家分享了jQuery轮播效果展示的具体代码，供大家参考，具体内容如下

jQ代码：

在写jQuery代码之前一定要先导库，此处我用的是3.0的库

<script src="jquery-3.0.0.js"></script>
 <script type="text/javascript">
     var timer;
     $(function() {
       //设置图片向左移
       imgshow();
       //点击暂停按钮事件
       $(".pause").click(function () {
         clearInterval(timer);
       });
       //点击播放按钮事件
       $(".play").click(function () {
         imgshow();
       });
       //点击左按钮
       $(".prev").click(function () {
         imganimation("left");
       });
       //点击右按钮
       $(".next").click(function () {
         imganimation("right");
       });
       function imganimation(res) {
         //图片向左走的轮播
         if(res=="right"){
           //animate()动画第一个li向左移动20％
           $(".lilist:first").animate({
             "marginLeft": "-20％"
           }, 700, "linear", function () {
             //这个li回到原来的位置
             $(this).css("marginLeft", "0px");
             //将它追加到ul的最后的位置
             $(this).appendTo($(".ullist"));
           });
           //设置小框的图片轮播，原理与大框图片轮播一致
           $(".s_lilist:first").animate({
             "marginLeft": "-20％"
           }, 650, "linear", function () {
             $(this).css("marginLeft", "0px");
             $(this).appendTo($(".s_ullist"));
           });
         }else {
           //图片向右走，与向左的原理相同
           $(".lilist:first").animate({
             "marginLeft": "20％"
           }, 700, "linear", function () {
             $(this).css("marginLeft", "0px");
             $(".lilist:last").prependTo($(".ullist"));
           });
           $(".s_lilist:first").animate({
             "marginLeft": "20％"
           }, 650, "linear", function () {
             $(this).css("marginLeft", "0px");
             $(".s_lilist:last").prependTo($(".s_ullist"));
           });
         };
       };
       //默认图片自动向左走
       function imgshow() {
         timer = setInterval(function (){
               imganimation("right");
             } , 2000);
       };
     });
   </script>

 css样式：

      * {
       margin: 0;
       padding: 0;
     }

.divbg {
       width: 100％;
       height: 350px;
       /*overflow: hidden;*/
       position: relative;
     }

.mb {
       width: 30％;
       height: 350px;
       background: rgba(0, 0, 0, 0.3);
       position: absolute;
     }

.mb:first-child {
       left: 0px;
     }

.mb:nth-child(2) {
       right: 0px;
     }

.ullist {
       width: 200％;
       height: 350px;
       margin-left: -50％;
     }

.lilist {
       width: 20％;
       height: 350px;
       list-style: none;
       float: left;
     }

.imglist {
       width: 100％;
       height: 100％;
     }
     .divblock{
       width: 20％;
       height: 70％;
       border: 4px solid rgba(255, 255, 255, 0.32);
       position: absolute;
       z-index: 5;
       left: 46％;
       top: 15％;
       overflow: hidden;
     }
     .s_mb{
       width: 100％;
       height: 100％;
       background: rgba(0, 0, 0, 0.5);
       position: absolute;
       z-index: 10;
     }
     .s_ullist{
       width: 500％;
       height: 100％;
       margin-left: -200％;
     }
     .s_lilist{
       width: 20％;
       height: 100％;
       list-style: none;
       float: left;
     }
     .s_imglist{
       height: 100％;
       width: 100％;
     }
     .s_mb img{
       margin-left: 16％;
       margin-top: 65％;
       cursor: pointer;
     }

html样式：

 <div class="divbg">
   <div class="divblock">
      <div class="s_mb">
        <img class="prev" src="./img2/btn_prev.png" />
        <img class="pause" src="./img2/btn_pause.png" />
        <img class="play" src="./img2/btn_play.png" />
        <img class="next" src="./img2/btn_next.png" />
      </div>
      <ul class="s_ullist">
        <li class="s_lilist">
         <img class="s_imglist" src="img2/2121.jpg" />
        </li>
        <li class="s_lilist">
         <img class="s_imglist" src="img2/2122.jpg" />
        </li>
        <li class="s_lilist">
         <img class="s_imglist" src="img2/2123.jpg" />
        </li>
        <li class="s_lilist">
         <img class="s_imglist" src="img2/2124.jpg" />
        </li>
        <li class="s_lilist">
         <img class="s_imglist" src="img2/2123.jpg" />
        </li>
      </ul>
   </div>
   <div class="mb"></div>
   <div class="mb"></div>
   <ul class="ullist">
     <li class="lilist">
       <img class="imglist" src="img2/2121.jpg" />
     </li>
     <li class="lilist">
       <img class="imglist" src="img2/2122.jpg" />
     </li>
     <li class="lilist">
       <img class="imglist" src="img2/2123.jpg" />
     </li>
     <li class="lilist">
       <img class="imglist" src="img2/2124.jpg" />
     </li>
     <li class="lilist">
       <img class="imglist" src="img2/2123.jpg" />
     </li>
   </ul>
 </div>

来源：http://blog.csdn.net/sinat_37605922/article/details/77345194