求jquery图片轮转效果

求如上图的图片轮转效果谢谢大神了

解决方案 »

  1.   

    从你的图片上看不出是翻页还是滚动，直接给你推荐几个插件吧
    http://www.gbin1.com/technology/jquerynews/20120918-flip-animal-photobook/
    http://www.gbin1.com/technology/jquerynews/20120926-jquery-slider-cycle2/
    http://www.gbin1.com/technology/jquerynews/20121110-jquery-jqtiles/
    http://www.gbin1.com/technology/jquerynews/20120819-jquery-image-3d-slider/
      

  2.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <BODY>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
     
    <style>
    #imgbox{
    width:250px;
    height:250px;
    border:1px solid #ccc;
    position:relative;
    overflow:hidden;
    }
    #imgbox img{
    width:250px;
    height:250px;
    display:none;
    position: absolute;
    top:0;
    left:0;
    }
    #imgbox .act{ display:block;z-index:9}
    .infoBar{ text-align:center; width:250px;  }
    </style>
    <div id="imgbox">
    <img class="act" src="http://e.hiphotos.baidu.com/pic/w%3D230/sign=8eb4edf74afbfbeddc59317c48f1f78e/e824b899a9014c08ba1d546d0b7b02087af4f4d0.jpg" />
    <img src="http://e.hiphotos.baidu.com/pic/w%3D230/sign=89d9aee991ef76c6d0d2fc28ad17fdf6/fc1f4134970a304e491bdc32d0c8a786c9175c38.jpg" />
    <img src="http://c.hiphotos.baidu.com/pic/w%3D230/sign=0b99fb4fd1a20cf44690f9dc46084b0c/9825bc315c6034a80cc4c449ca134954082376d7.jpg" />
    <img src="http://g.hiphotos.baidu.com/pic/w%3D230/sign=501967d6b8389b5038ffe751b537e5f1/18d8bc3eb13533fae443eee6a9d3fd1f40345b04.jpg" />
    <img src="http://c.hiphotos.baidu.com/pic/w%3D230/sign=20b79e70d53f8794d3ff4f2de2190ead/aec379310a55b3195936ffbd42a98226cefc172e.jpg" />
    <img src="http://a.hiphotos.baidu.com/pic/w%3D230/sign=a28bbffb728da9774e2f81288050f872/a1ec08fa513d2697b1f5749554fbb2fb4216d8d0.jpg" />
    <img src="http://a.hiphotos.baidu.com/pic/w%3D230/sign=f358063ad462853592e0d522a0ee76f2/32fa828ba61ea8d3951708cc960a304e241f58c4.jpg" />
    <img src="http://d.hiphotos.baidu.com/pic/w%3D230/sign=380ad47ad058ccbf1bbcb23929dabcd4/a5c27d1ed21b0ef49001e596dcc451da80cb3e08.jpg" />
     
    </div>
    <div class="infoBar" ><a href="#" id="bntPrev" ><</a> <a id="imgInfo" ></a>  <a href="#" id="bntNext" >></a>   </div>
    <script>
    function PlayImg(id,time,callBack){
    var ii=0,me=this;
    var imgs=$(id+' img'),L=imgs.length,tir,w=imgs[0].offsetWidth;
    function fn(t){
     var t=(t||1)==1?1:L-1;
     var n=$(imgs[(ii+t)%L]);
     n.show().css({left:0,opacity:1});
     clearTimeout(tir);
     $(imgs[ii]).animate({ left:w*(t==1?1:-1),opacity:0 },800,function(){
    $(this).removeClass('act').hide();
    n.addClass('act');
    ii= (ii+t )%L;
    callBack&&callBack.call(me,ii,L);
    tir=setTimeout(fn,time);
     });
    }
    callBack&&callBack.call(me,ii,L);
    tir=setTimeout(fn,time);
    this.next=function(){
    $(imgs[ii]).stop();
    fn(1);
    }
    this.prev=function(){
    $(imgs[ii]).stop();
    fn(-1);
    }
    }
    $(function(){
    var play=new PlayImg('#imgbox',3000,function(i,L){
    $('#imgInfo').html( (i+1)+'/'+L )
    });
    $('#bntNext').click(function(){ play.next()  });
      $('#bntPrev').click(function(){ play.prev()  });
    })
    </script>
    </BODY>
    </HTML>