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

【问题标题】：how to make an image carousel for JQM based website如何为基于 JQM 的网站制作图像轮播
【发布时间】：2014-05-29 13:08:47
【问题描述】：

我为我的移动网站尝试了很多图片轮播，但都没有给出正确的结果。

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

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

如上图所示。图像轮播和页码之间存在白色间隙。我想调整图像的大小，以便可以用图像填补空白。在不丢失纵横比的情况下如果有人知道这个网站，请帮助我

【问题讨论】：

查源如何？

标签： jquery css image twitter-bootstrap jquery-mobile

【解决方案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

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

最后我可以得到我想要做的结果。而不是 JS，我得到了一个 css sn-p，它帮助我将较小的图像缩放到 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

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

【讨论】：