Question

我正在尝试使用jquery循环来旋转页面上的一些图像。图像宽度为1400px，这意味着对于屏幕分辨率较小的人来说，图像的右侧最终会消失。

我想这样做，使图像在图像的两侧失去相同的量，从而使图像的中心保持在观察窗的中心。

如果您查看http://renegadeox.com/并调整浏览器窗口大小，您就会明白我的意思。

如何使用javascript相对于容器向左移动图像，从而使图像保持居中？

以下是完整性代码：

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

Answer 1

您可以使用循环插件中的自定义过渡来定义您自己的方法，以计算您可以使用此代码的正确左值

编辑

我尝试了这段代码并且它有效，但是这只适用于load事件，它不适用于调整大小，如果将整个函数绑定到resize事件，则可能会获得所需的效果

你还需要添加一点css：

<style>
.slideshowWrap{
    width:100% !important;
    overflow:hidden;
}
</style>

这是适合我的js：

$(document).ready(function() {
var leftVal = 0;
    if($(window).width()<1400){
        leftVal = ((1400 - $(window).width())/2)*-1;
    }

    $('.slideshowWrap').cycle({
        fx:      'custom',
        cssBefore: { 
            left: leftVal, 
            top:  0,  
            opacity: 1,
    display: 'block'
        },
        animOut: { 
            opacity: 0 
        },
        animIn: { 
            left: leftVal, 
            top: 0, 
        },
        cssAfter: { 
            zIndex: 0
        },
    cssFirst: {
    left: leftVal
    },
        delay: -3000
    });
});
</script>

我相信上面的代码会给你想要的效果，如果不是至少知道如何实现这一点，希望它有所帮助！这是循环自定义fx http://jquery.malsup.com/cycle/adv.html

上的完整文档的链接

Answer 2

你需要有图像吗，你能使用背景图像吗？为什么不用css？

它会响应，但如果你想让插件随着用户改变浏览器大小而自行调整大小 - 它需要在window resize事件上更新。

否则，如果有低分辨率的人打开页面，滑块将始终为其屏幕的100％，图像将居中（并“裁剪”）

<!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>
    <style type="text/css">
        .slideshowWrap {
            width: 100%;
            height: 500px;
        }
        .homeslideshow {
            height: 100%;
            width: 100%;
        }
        .slide1 {
            background: url(background_01.jpg) no-repeat 50% 50%;
        }
        .slide2 {
            background: url(background_02.jpg) no-repeat 50% 50%;
        }
        .slide3 {
            background: url(background_03.jpg) no-repeat 50% 50%;
        }
        .homeslideshow img {  display: none; }
    </style>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.slideshowWrap').cycle({
                fx: 'fade',
                slideResize: 0
            });
        });
    </script>
    <div style="margin: 0 auto" class="slideshowWrap">
        <div class="homeslideshow slide1">
            <img src="background_01.jpg" alt="" />    
        </div>
        <div class="homeslideshow slide2">
            <img src="background_02.jpg" alt="" />    
        </div>
        <div class="homeslideshow slide3">
            <img src="background_03.jpg" alt="" />    
        </div>
    </div>
</body>
</html>

javascript - 根据浏览器窗口的大小向左移动图像

2 个答案: