http://caroufredsel.dev7studios.com/configuration.php
caroufredsel 的配置页面里提到 swipe 这个属性:To enable this feature, you’ll need to include the jQuery.touchSwipe-plugin.
如果 HTML 结构是这样
<div class="image_carousel"> <ul id="carousel"> <li><img src="slier.jpg"/><li> <li><img src="slider2.jpg"/><li> </ul> </div>
你可以这样使这个幻灯片支持touchswipe
<script> $("#carousel").carouFredSel({ auto : false, prev : '#c-prev', next : '#c-next', swipe : { onTouch : true, onMouse : true } }); </script>
倘若这个幻灯片的图片带来链接:
<ul id="carousel"> <li><a href="foo.html"><img src="kitten.jpg"/></a><li> <li><a href="foo.html"><img src="puppy.jpg"/></a><li> </ul>
那这个就不起作用了。
这是因为 这个插件将一些元素排除了,查看代码可以发现:
excludedElements:"label, button, input, select, textarea, a, .noSwipe"
所以在处理带连接的情况,就需要重置一下 excludedElements, 例如:
$("#foo1").carouFredSel({ auto : false, items: 1, swipe : { onTouch : true, onMouse : true, options : { excludedElements: "button, input, select, textarea, .noSwipe" } }, prev : "#foo1_prev", next : "#foo1_next" });
可以在手机里打开下面的链接查看 http://jsfiddle.net/4uUKd/28/embedded/result,js,css,html/
或者扫描:
还有另一个另一个jquery 插件,jQuery Touchwipe Plugin
这两个插件名字类似,但是功能却不尽一样。
导入这个插件后,我们可以这样实现:
$('#carousel').carouFredSel({ width: '100%', prev: '#prev-propslider', next: '#next-propslider', swipe: true }); $('#carousel').touchwipe({ wipeLeft: function() { $('#carousel').trigger('next', 1); }, wipeRight: function() { $('#carousel').trigger('prev', 1); } });
这样就可以了,但是至于 touchSwipe 如何支持链接,一时还找不到方法。