幻灯片 - 滚动到 - 画廊显示图像页面 - 居中

Question

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

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

我使用了这个页面的一些代码：

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

现在我的 div 位于浏览器的左边框。我怎样才能让它在 div 的中心滚动？

Answer 1

您不能在 SO 上期待这样的答案。但我最近创造了类似的东西，所以我只是分享。

基本上你需要的是这样的：

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>

附：将样式放入适当的 .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();
});