Jquery 如何为基于JQM的网站制作图像转盘

我已经为我的移动网站尝试了很多图像旋转木马，但没有一个能给出正确的结果

我想要的是这个网站

如果在移动设备中打开上述链接，则可以看到旋转木马。如果图像较大，则会将其剪切并居中，然后缩放以适合窗口。我正试图做一些类似的事情，但它没有发生

如上图所示。图像carousal和页码之间存在白色间隙。我想调整图像的大小，以便用图像填充间隙。在不降低纵横比的情况下

---

如果有人对本网站有任何想法，请帮助我

您可以使用猫头鹰旋转木马：

要使图像“缩放”，只需设置

max height

和

max width

css属性，例如：

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

这是一个正在工作的

---

当你能在页面上找到你想要的东西时，你为什么要使用类似的旋转木马呢

下面是一个工作示例：

HTML: 注:

---

如果您想使用较新的版本，请转到他们的github站点：，原始开发人员不再使用此代码，因此不要使用在官方站点上找到的代码：

最后，我可以得到我尝试执行的结果。而不是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

---

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

检查来源如何？

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

    myPhotoSwipe.show(0);      
});

.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;
}