jquery - 4个方向的jQuery全屏幻灯片

Question

简单的问题，但答案可能更难。我无法计算出对这个http://www.socketstudios.com/网站的影响。它基本上是响应式和全屏演示。有 scrollTo 插件，它不再可用，所以我正在寻找替代品，因为我不确定它是否是导致效果的原因，即使是，如果你需要更多插件。

Answer 1

为了调整图像的大小，他们使用了一个监听resize事件的脚本。

$(window).resize(function() {             
var top_target = '#work'+current_section;
var $main = $('#main');
$main.scrollTo(top_target);

var i=0;
    for (i=0;i<=15;i++)
    {
  var $container = $('#work'+i);
  var left_target = '#workcontent1';
  $container.scrollTo(left_target);
    }


var left_target = '#workcontent'+current_image;
var $work_container = $('#work'+current_section);
$work_container.scrollTo(left_target);

// Get Window Size

var myWidth = 0, myHeight = 0;

myWidth = $(window).width();
myHeight = $(window).height();

if(myHeight >= 900){
    image_height = 900;
    image_width = 1350;
}
else{
    image_height = myHeight;
    image_width = image_height * 1.5;
}

 // Set Image Offset

var $imgcont = $('.imgcontainer');

$imgcont.css('width', +image_width);
    $imgcont.css('margin-top', +image_height / -2 + "px");
$imgcont.css('margin-left', +image_width / -2 + "px");
 });

Answer 2

你可以是一个忍者，使用循环插件，然后使用向上、向下、向左滚动，将 div 设置为页面大小，并将按钮置于固定位置。这需要一个 jQuery 库。

http://jquery.malsup.com/cycle/int2.html

很酷的主意！:D 所以一个正常的上下滚动，每个上下都有一个上一个和下一个，但正如我所说，你必须肯定是一个忍者。