文章/答案/技术大牛

发布

社区首页 >问答首页 >Jssor图像放大

问Jssor图像放大
EN

Stack Overflow用户

提问于 2014-04-21 03:41:07

回答 4查看 1.7K关注 0票数 1

我正在使用Jssor图书馆创建一个图像滑块。我将$FillMode设置为4，以便将图像放入容器中，但它没有工作。这是其中一幅图像的样子：

所以我尝试了其他的模式，但没有看到任何变化。

这是我的代码：

<!DOCTYPE html> 
<html> 
    <head>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jssor.core.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jssor.utils.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.mini.js"></script>
</head> 

<body> 
    <div id="main">
       <h1>Swipe right for yes and left for no.</h1>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 300px; height: 600px; overflow: hidden;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 300px; height: 600px;">
        <div><img src="{{ STATIC_URL }}images/indian.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/hamburger.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/italian-pizza.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/hummus.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/pie.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/montecristo.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/eclairs.jpg" alt="" title=""/></div> 
    </div> 
    <script>jssor_slider1_starter('slider1_container');</script>
</div>
    </div> 
<script>
    jQuery(document).ready(function ($) {
        var options = {
            $FillMode: 4,
        };                            
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);

        //responsive code begin
        //you can remove responsive code if you don't want the slider scales
        //while window resizes
        function ScaleSlider() {
            var parentWidth = $('#slider1_container').parent().width();
            if (parentWidth) {
                jssor_slider1.$ScaleWidth(parentWidth);
            }
            else
                window.setTimeout(ScaleSlider, 30);
        }
        //Scale slider after document ready
        ScaleSlider();
        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);
        //responsive code end
    });
</script>
</body>
</html>

javascript

jquery

slider

jssor

回答 4

Stack Overflow用户

回答已采纳

发布于 2014-04-21 05:10:23

刚在我的CSS中添加了一个最大宽度和最大高度，如下所示：

<style>
#slider1_container img {
    max-width:100%;
    max-height:100%;
}
</style>

票数 1

Stack Overflow用户

发布于 2014-04-21 04:45:36

<!DOCTYPE html> 
<html> 
    <head>
    <meta name="viewport" content="width=device-width">
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.mini.js"></script>
</head> 

<body> 
    <div id="main">
       <h1>Swipe right for yes and left for no.</h1>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 300px; height: 600px; overflow: hidden;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 300px; height: 600px;">
        <div><img src="{{ STATIC_URL }}images/indian.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/hamburger.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/italian-pizza.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/hummus.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/pie.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/montecristo.jpg" alt="" title=""/></div> 
        <div><img src="{{ STATIC_URL }}images/eclairs.jpg" alt="" title=""/></div> 
    </div> 
    <script>jssor_slider1_starter('slider1_container');</script>
</div>
    </div> 
<script>
    jQuery(document).ready(function ($) {
        var options = {
            $FillMode: 4,
        };                            
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);

        //responsive code begin
        //you can remove responsive code if you don't want the slider scales
        //while window resizes
        function ScaleSlider() {
            var parentWidth = $('#slider1_container').parent().width();
            if (parentWidth) {
                jssor_slider1.$ScaleWidth(parentWidth);
            }
            else
                window.setTimeout(ScaleSlider, 30);
        }
        //Scale slider after document ready
        ScaleSlider();
        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);
        //responsive code end
    });
</script>
</body>
</html>

票数 0

Stack Overflow用户

发布于 2014-07-23 01:51:05

FillMode有一个选项，即5 (包含大图像，实际大小表示小图像)。还没试过，但应该能用。

参考链接

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23190469

复制

相似问题

问Jssor图像放大
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jssor图像放大EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jssor图像放大
EN