0

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

我想使图像在图像的两侧损失相等的量，从而使图像的中心保持在查看窗口的中心。

如果您查看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>
4

2 回答 2

1

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

编辑

我尝试了这段代码，它可以工作，但是这只适用于加载事件，它不适用于调整大小，如果将整个函数绑定到调整大小事件，你可能会得到想要的效果

您还必须添加一点 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的完整文档的链接

于 2013-09-25T20:50:19.197 回答
0

你需要有图片，你可以使用背景图片吗？为什么不直接使用 css？

它将是响应式的，但如果您想让插件在用户更改浏览器大小时自行调整大小 - 它需要在窗口调整大小事件时更新。

否则，如果有人以低分辨率屏幕打开页面，滑块将始终是其屏幕的 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>
于 2013-09-25T22:11:09.917 回答