手风琴图像查看器...在手机上滑动导航？

Question

我手边有一个手风琴图像查看器：

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');
});

我希望用户可以左右滑动来浏览移动设备上的照片。

任何人都可以提供一些见解吗？

Answer 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');
}
});
});

如果您遇到任何问题，请告诉我。