使用jquery 建立图片轮播效果。基于对象，可扩展

天虹

2013-07-27

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .out_pic{
            width: 320px;
            height: 220px;
            position: relative;
            background: #ffffff;
            border: 1px #dddddd solid;
            padding: 5px;
            overflow: hidden;
        }
        .inner_pic{
            position: absolute;
            left: 0;
            top: 0;
            list-style: none;
            margin: 5px;
            padding: 0;
            width: 975px;
        }
        .inner_pic li{
            list-style: none;
            padding: 0;
            float: left;
            margin-right: 5px;
        }

        .inner_pic li img{
            width: 320px;
            height: 220px;
        }

        .pic_control {
            position: absolute;
            top: 40%;
            cursor: pointer;
            width: 40px;
            height: 40px;
            margin-top: -20px;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            font-size: 60px;
            font-weight: 100;
            line-height: 30px;
            color: #fff;
            text-align: center;
            background: #222;
            border: 3px solid #fff;
            -webkit-border-radius: 23px;
            -moz-border-radius: 23px;
            border-radius: 23px;
            opacity: .5;
            filter: alpha(opacity=50);
        }
        .pic_control:hover{
            opacity: .7;
            filter: alpha(opacity=70);
        }
        .pic_prev{
            left: 15px;

        }
        .pic_next{
            right: 15px;
            left: auto;

        }
    </style>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"> </script>
    <script>
        $(document).ready(function(){
            var carousel=function(option){
                this.carousel_inner_ul=option.carousel_inner_ul;
                this.count=option.count;
                this.width= this.carousel_inner_ul.width();
                this.per_width=this.width/this.count;
                this.index=1;
            }
            carousel.prototype={
                moveTo:function(index){
                    if(index>this.count)index=1;
                    if(index<1)index=this.count;
                    this.carousel_inner_ul.animate({"left":+(-(index-1)* this.per_width)+'px'},400);
                    this.index=index;
                },
                next:function(){
                    this.moveTo(++this.index);
                },
                prev:function(){

                    this.moveTo(--this.index);
                }
            }

          var mycarousel=new carousel({
                carousel_inner_ul:$('.inner_pic'),
                count:3
            });
           $('.pic_prev').click(function(){
               mycarousel.prev();
           });
            $('.pic_next').click(function(){
                mycarousel.next();
            });
        });

    </script>
</head>
<body>
      <div class="out_pic">
          <ul class="inner_pic">
              <li><img src="img/1.jpg"></li>
              <li><img src="img/2.jpg"></li>
              <li><img src="img/3.jpg"></li>
          </ul>
          <a class="pic_prev pic_control">&lsaquo;</a>
          <a class="pic_next pic_control">&rsaquo;</a>
      </div>
</body>
</html>

轮播 jquery