我手边有一个手风琴图像查看器:
http://jsfiddle.net/gvp8kkeh/1/
这是HTML:
<div class="accordian">
<ul>
<li class="item active">
<a href="#">
<img src="http://ih0.redbubble.net/image.7643638.3643/flat,550x550,075,f.jpg" alt="" />
</a>
</li>
<li class="item">
<a href="#">
<img src="http://ih0.redbubble.net/image.7643638.3643/flat,550x550,075,f.jpg" alt="" />
</a>
</li>
<li class="item">
<a href="#">
<img src="http://ih0.redbubble.net/image.7643638.3643/flat,550x550,075,f.jpg" alt="" />
</a>
</li>
<li class="item">
<a href="#">
<img src="http://ih0.redbubble.net/image.7643638.3643/flat,550x550,075,f.jpg" alt="" />
</a>
</li>
<li class="item">
<a href="#">
<img src="http://ih0.redbubble.net/image.7643638.3643/flat,550x550,075,f.jpg" alt="" />
</a>
</li>
</ul>
</div>
这是CSS:
.accordian {
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
overflow: hidden;
}
.accordian ul {width: 200%;}
.accordian li {
position: relative;
display: block;
width: 4%;
float: left;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.accordian .active {width: 32%;}
.accordian li img {
display: block;
width: 60vw;
height: auto;
}
和JS:
var items = $('.accordian .item');
items.on('mouseover', function (event) {
items.removeClass('active');
$(this).addClass('active');
});
我希望用户可以左右滑动来浏览移动设备上的照片。
任何人都可以提供一些见解吗?
答案 0 :(得分:1)
你需要使用jQuery mobile。然后你可以使用类似的东西:
$( ".accordian" ).on( "swipeleft", function(event){
items.each(function (event) {
if($(this).hasClass('active))
{
var index = $(this).index();
items.removeClass('active');
items.eq(index-1).addClass('active');
}
});
});
$( ".accordian" ).on( "swiperight", function(event){
items.each(function (event) {
if($(this).hasClass('active))
{
var index = $(this).index();
items.removeClass('active');
items.eq(index+1).addClass('active');
}
});
});
如果您遇到任何问题,请告诉我。