我做了一个图像,当你点击它然后将它拖动它转动并制作360.它在桌面和平板电脑上工作正常但是当我在移动设备上拖动它时360图像下面的文字跳转并涵盖360图像。我想这可能是因为我的手机比电脑和平板电脑慢,但我不确定。
有人可以告诉我,如果我的假设是正确的,或者是否有办法解决这个问题
我也使用j360插件
我的HTML
<div class="swipe-wrapper">
<div class="swipe">
<img class="swipe-360" src="images/swipe.png">
<div class="swipe-pic">
<div id="product" style="overflow: hidden;">
<img src="images/img0.jpg" />
<img src="images/img01.jpg" />
<img src="images/img02.jpg" />
<img src="images/img03.jpg" />
<img src="images/img04.jpg" />
<img src="images/img05.jpg" />
<img src="images/img06.jpg" />
<img src="images/img07.jpg" />
<img src="images/img08.jpg" />
<img src="images/img09.jpg" />
<img src="images/img10.jpg" />
<img src="images/img11.jpg" />
<img src="images/img12.jpg" />
<img src="images/img13.jpg" />
<img src="images/img14.jpg" />
<img src="images/img15.jpg" />
<img src="images/img16.jpg" />
<img src="images/img17.jpg" />
<img src="images/img18.jpg" />
<img src="images/img19.jpg" />
<img src="images/img20.jpg" />
<img src="images/img21.jpg" />
<img src="images/img22.jpg" />
<img src="images/img23.jpg" />
<img src="images/img24.jpg" />
<img src="images/img25.jpg" />
<img src="images/img26.jpg" />
<img src="images/img27.jpg" />
<img src="images/img28.jpg" />
<img src="images/img29.jpg" />
<img src="images/img30.jpg" />
<img src="images/img31.jpg" />
<img src="images/img32.jpg" />
<img src="images/img33.jpg" />
<img src="images/img34.jpg" />
<img src="images/img35.jpg" />
</div>
</div>
<div class="swipe-info">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim augue a magna aliquam, quis pellentesque orci aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed rhoncus non sapien egestas mattis. Fusce tincidunt sapien vel elit tincidunt, eget convallis mi mattis. Integer eu ultrices neque. Nulla facilisi. Nunc ac cursus tortor, ut pharetra massa. Donec condimentum euismod tincidunt. Curabitur ut dui et nunc cursus venenatis. Pellentesque eget varius orci. Nam varius a erat at venenatis. </p>
</div>
</div>
我的js
$(document).ready(function(e) {
jQuery('#product').j360();
});
我的css
.swipe-pic{
overflow:hidden;
position:relative;
}
#product{
width: 100%
}
.swipe-360 {
margin: 20px 0 0 18px;
position: absolute;
z-index:4;
}
.swipe {
background: none repeat scroll 0 0 #C9C9C8;
float: left;
width: 66%;
}
.swipe-wrapper {
margin: 21px 0 0;
}
.swipe-info h3 {
font-size: 45px;
font-weight: 300;
padding: 0 0 1px;
}
.swipe-info p {
font-size: 18px;
margin: 0 0 8px 2px;
}