（响应）在 javascript 中将宽度单位从 px 更改为 %

Question

所以我在页面上有一个内容滑块：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”变成%？

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

Answer 1

您不能简单地更改一个位置并使此滑块具有响应性。您当然可以更改 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滑块插件有点bug，特别是当你调整页面大小时，冻结浏览器一段时间，滑块可能会丢失 2.你的页面里有太多的css和js，它们真的有必要吗？放慢你的站点伙伴。