幻灯片 - 滚动到 - 图库以图片为中心显示图片

Question

我正在寻找像这样的“滚动到”效果：

http://studio8169.com/?page_id=11

我使用了此页面中的一些代码：

http://www.thewebsqueeze.com/web-design-tutorials/create-a-horizontal-scrolling-website.html

现在我的div位于浏览器的左边界。如何让它在div的中心滚动？

Answer 1

你不能指望这样的答案在这里。但我最近创造了类似的东西，所以我只是分享。

基本上你需要的是：

jsBin demo

<强> edit / download

  <div id="mid"> (Position: absolute, width:100%, height:400px; overflow:hidden;)

    <div id="gallery"> (position:relative;width:960px;margin:0 auto;)
       <div id="slider"> (position absolute;left:0px;width:100000px;height:400px;)
          <div class="box"></div> (position:relative; float:left;) width:960px;height:400px;
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
       <div class="btn btn_left"></div> (position:absolute;top:150px;left:0px;)
       <div class="btn btn_right"></div> (position:absolute;top:150px;right:0px;)
    </div>

  </div>

P.S。将样式放在正确的.css文件或<style>标记内

我创建了一些javascript / jQuery：

var animateTime = 1000; // set preferred animation time
var galW = $('#gallery').innerWidth(); // return 960px
var slidesN = $('#slider>div.box').length;
var c = 0; // set counter to '0'

function states(){
  var cStat=c===-1?c=slidesN-1:c=c%slidesN; // counter states
  var btnStat=c===0?$('.btn_left').hide():$('.btn_left').stop(1).fadeIn(300); // left button states
}
states(); // set states at DOM ready

function anim(){
  $('#slider').stop(1).animate({left: -(c*galW)}, animateTime);
}

$('#gallery .btn').on('click',function(){
  var btnClass=$(this).hasClass('btn_left') ? c-- : c++ ;
  states();
  anim();
});