我正在尝试使用 jquery 循环插件淡入和淡出一些我想在网站首页上使用的图像。
问题是，为了迎合大屏幕的人，图像是 1400px 宽和居中，这在大屏幕尺寸上效果很好，但我需要这些图像在所有屏幕尺寸上居中，如果你通过较小的查看门户查看它，图像的最左侧始终是可见的。我希望图像的中心始终位于查看门户的中心。
为了更好地解释您是否访问：http://renegadeox.com/并调整浏览器窗口的大小(假设您的分辨率超过 1400px 宽(，您可以看到图像保持居中，直到窗口小于图像，此时右侧开始变得不可见。我希望双方都以相同的速度被裁剪。
我知道使用背景图像是可能的。但我不能淡化背景图像。
我已经看到了其他将图像居中和淡入淡出等的方法，但没有一种可以协同工作。谁能帮我。我没有想法:(
这是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshowWrap').cycle({
fx: 'fade', // http://malsup.com/jquery/cycle/ Background rotater
});
});
</script>
<div style="margin: 0 auto" class="slideshowWrap">
<div class="homeslideshow">
<img src="background_01.jpg" alt="" />
</div>
<div class="homeslideshow">
<img src="background_02.jpg" alt="" />
</div>
<div class="homeslideshow">
<img src="background_03.jpg" alt="" />
</div>
</div>
</body>
</html>
试试这个。遍历并为每个图像提供类："sliderImage"。
$(document).ready(function () {
$('.slideshowWrap').cycle({
fx: 'fade', // http://malsup.com/jquery/cycle/ Background rotater
});
centerSliderImage();
});
$(window).resize(function () {
centerSliderImage();
});
function centerSliderImage() {
$(".sliderImage").each(function () {
if (this.width > window.innerWidth) {
var offset = (this.width - window.innerWidth) / 2;
$(this).css({
"margin-left": "-" + offset + "px"
})
}
})
}
JSFiddle：http://jsfiddle.net/Wy2ku/6/
更容易看到演示：http://fiddle.jshell.net/Wy2ku/6/show/