1

我正在尝试使用 jquery 循环插件来淡入和淡出一些我想在我的网站首页上使用的图像。

问题是，为了迎合大屏幕的人，图像宽度为 1400 像素且居中，这在大屏幕尺寸上效果很好，但我需要这些图像在所有屏幕尺寸上居中，如果你通过较小的查看门户查看它图像的最左侧始终可见。我希望图像的中心始终位于查看门户的中心。

为了更好地解释您是否访问： http : //renegadeox.com/ 并调整浏览器窗口的大小（假设您的分辨率超过 1400 像素宽），您可以看到图像保持居中，直到窗口小于图像，此时右手边开始变得隐形。我希望双方以相同的速度进行裁剪。

我知道背景图片是可能的。但我不能淡化背景图像。

我见过其他使图像居中和淡化等的方法，但没有一个可以协同工作。谁能帮我吗。我没有想法:(

这是我的代码：

<!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>
4

1 回答 1

0

尝试这个。浏览并给每个图像一个类：“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/

于 2013-10-03T18:23:15.957 回答