0

所以我在页面上有一个内容滑块：http: //helpmyedu.com/asdtest-2，我想让它响应式（100% 宽度）.. 在此处输入图像描述

通过更改开发人员工具中的以下代码，我已成功使其响应：

在此处输入图像描述

但是，我只能更改样式表中的前 100%，下面的两个是由这段 javascritp 控制的：

    <script type="text/javascript">

        $(document).ready(function() {
            $.noConflict();

            jQuery('#services-example-1').services(
                {
                    width:1144,
                    height:300,
                    slideAmount:6,
                    slideSpacing:30,
                    touchenabled:"on",
                    mouseWheel:"on",
                    hoverAlpha:"off",
                    slideshow:6000,
                    hovereffect:"on",
                    callBack:function() { }

                });


    });
    </script>

如何将“宽度：1144”转换为 %？

或者我可以让这个滑块响应吗？多谢！

4

1 回答 1

0

您不能简单地更改一个位置并使此滑块具有响应性。您当然可以更改 js 中的值，但您仍然会获得全宽滑块，因为所有子元素仍保持其原始大小。

您可以做的是覆盖您的 css 中的每个元素（如 .imgholder .thumb 等），以便它响应页面大小，此外，您必须将 js 中的宽度调整为基于页面宽度的值，像这样：

var sliderwidth = 
                    Math.round(parseInt(jQuery('#services-example-1').css('width'))-(50)); //Leave some margin for padding and scroll bar
                    jQuery('#services-example-1').services(
                        {
                            width:sliderwidth,
                            height:300,
                            slideAmount:6,
                            slideSpacing:30,
                            touchenabled:"on",
                            mouseWheel:"on",
                            hoverAlpha:"off",
                            slideshow:6000,
                            hovereffect:"off"
                        });

我希望这会解决你的问题，我没有改变高度，因为你仍然需要那个高度来包含你的图像。

我注意到另外两件事：1. 这个 jquery 滑块插件有点错误，尤其是当你调整页面大小时，冻结浏览器一段时间，滑块可能会丢失 2. 你的页面中有太多的 css 和 js，是他们真的有必要吗？放慢你的站点伙伴。

于 2013-11-14T05:29:48.753 回答