Question

我为我的移动网站尝试过很多图像轮播，但没有一个能够给出正确的结果。

我想要的是像这个网站http://m.zoopla.co.uk/to-rent/details/17936879

如果您在移动设备上打开上方链接，则可以看到轮播。如果图像较大，则将它们剪切并居中，然后缩放以适合窗口。我试图做那样的事情，但事情并没有发生。

enter image description here

如上图所示。在图像转盘和页码之间存在白色间隙。我想以这样的方式调整图像大小，以便我可以用图像填补空白。不会失去宽高比如果有人对这个网站有任何想法，请帮帮我

Answer 1

您可以使用OWL Carousel执行此操作：http://www.owlgraphic.com/owlcarousel/index.html

要使图片“缩放”，您只需设置max-height和max-width css属性，例如：

#owl-demo .item img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

这是一个有效的 DEMO

Answer 2

为什么你想在那个页面上使用类似的轮播时使用类似的轮播。

以下是一个有效的例子：http://jsfiddle.net/Gajotres/PFqVs/

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://www.photoswipe.com/latest/photoswipe.css" />        
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://thecodingwebsite.com/tutorials/photoswipe/klass.min.js"></script>            
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>            
        <script src="http://thecodingwebsite.com/tutorials/photoswipe/code.photoswipe.jquery-3.0.4.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content">
                <ul class="gallery">           
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/001.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/001.jpg" alt="Image 001" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/002.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/002.jpg" alt="Image 002" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/003.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/003.jpg" alt="Image 003" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/004.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/004.jpg" alt="Image 004" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/005.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/005.jpg" alt="Image 005" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/006.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/006.jpg" alt="Image 006" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/007.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/007.jpg" alt="Image 007" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/008.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/008.jpg" alt="Image 008" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/009.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/009.jpg" alt="Image 009" /></a></li>
                </ul>
            </div>
        </div>    
    </body>
</html>

的JavaScript：

$(document).on('pagebeforeshow', '#index', function(){   
    var myPhotoSwipe = $(".gallery li a").photoSwipe({
        jQueryMobile: true,
        loop: false,
        enableMouseWheel: false,
        enableKeyboard: false
    });

    myPhotoSwipe.show(0);      
});

注意：

如果您想使用更新的版本，请访问他们的github网站：https://github.com/dimsemenov/PhotoSwipe，原始开发人员不再使用此代码，因此请勿使用官方网站上的代码：www.photoswipe.com

Answer 3

最后我可以得到我想要做的结果。而不是JS我有一个CSS代码片段帮助我将较小的图像缩放到div大小而不会扭曲图像这里是小css代码

.small{
transform:scale(1.42,1.42);
-webkit-transform:scale(1.42,1.42);
-moz-transform: scale(1.42,1.42);
-o-transform:  scale(1.42,1.42);
-ms-transform:  scale(1.42,1.42);

transition: all 0.65s;
-webkit-transition: all 0.65s;
-moz-transition: all 0.65s;
-o-transition:  all 0.65s;
-ms-transition:  all 0.65s;
}

只需将其添加到图片代码中即可正常使用。

**注意：**要有效地使用此css方法，图像必须正确居中于div enter image description here

正如您在快照中看到的那样，图像被放大

如何为基于JQM的网站制作图像轮播

3 个答案:

HTML：

的JavaScript：

注意：