jquery 一个轮播

1、HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 
    <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    #contaner{
      height: 800px;
      width: 800px;
      margin: 50px auto;
      border: 1px solid red;
    }
    .leftphoto{
      height: 800px;
      width: 200px;
      overflow: scroll;
      float: left;
    }
    .leftphoto img{
      width: 180px;
      height: 240px;
    }
    .rightphoto{
      float: left;
      height: 798px;
      width: 580px;
      margin-left: 10px;
      text-align: center;
    }
    .rightphoto:after{
      content: "";
      clear: both;
    }
    .show img{
      height: 760px;
      width: 580px;
    }
    .tell{
      border: 8px solid #38a;
      width: 172px;
      height: 232px;
    }
    

    </style>
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript" src="jquery.carouselFigure.js"></script>
<script type="text/javascript">
    $(function(){
$(".leftphoto img").carouselFigure();

    })
    </script>

</head>
<body >
<div id="contaner">
        <div class="leftphoto">
              <img src="pic/01.jpg">
              <img src="pic/02.jpg">
              <img src="pic/03.jpg">
              <img src="pic/04.jpg">
              <img src="pic/05.jpg">
              <img src="pic/06.jpg">
              <img src="pic/07.jpg">
              <img src="pic/08.jpg">
              <img src="pic/09.jpg">
              <img src="pic/10.jpg">

        </div>

        <div class="rightphoto">
            <div class="show">
              <img src="" >
            </div>
            <div class="control">
              <input type="button" id="first" value="第一张">
              <input type="button" id="pre" value="上一张">
              <input type="button" id="next" value="下一张">
              <input type="button" id="last" value="最后一张">
              <input type="button" id="auto" value="自动播放">
            </div>
        </div>
</div>


</body>

</html>

2、JS：

 (function($){
      $.fn.carouselFigure = function(options){
          var settings = $.extend({
            picsrc:".leftphoto",
            photoShow:".show",
            first:"#first",
            pre:"#pre",
            next:"#next",
            last:"#last",
            auto:"#auto"
          },options||{});

          var pics = this;
          //给图片加一个序号，可以在shwPic中 通过下标访问
          this.each(function(n){
            $(this).data("num",n);
          });

          this.on("click",function(){
            showPic($(this).data("num"));
          });

          $(first).on("click",function(){
            showPic(0);
          })

          $(last).on("click",function(){
            showPic(pics.length-1);
          })

          var cur = 0;

          $(pre).on("click",function(){
            showPic(cur-1);
          });

          $(next).on("click",function(){
            showPic(cur+1);
          });
          var s = null;
          $(auto).toggle(function(){
            s = setInterval(function(){showPic(cur);cur++;},1000);
            $(this).val("停止播放");
          },function(){
            $(this).val("自动播放");
            clearInterval(s);
          })
          function showPic(index){    
            if(index<0){index = pics.length-1;
            }else if (index>pics.length-1) {index = 0};
            $(settings.photoShow).find("img").attr("src",pics[index].src)
                                             .animate({
                                                opcity: 0.8
                                                  },600);
              $(pics[index]).siblings("img").removeClass("tell");
              $(pics[index]).addClass("tell");
                cur = index;
          }
        showPic(0);
        return this;
      }


    })(jQuery)

 

posted @ 2016-07-10 14:32  暗夜幽狼  阅读(259)  评论(0)    收藏  举报