jquery焦点图插件carousel 支持手机触屏滑动
发布时间：2015-08-28 12:56 | 人气数：1516
owlCarousel实现可触屏响应式jQuery图片左右滚动代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>owlCarousel实现可触屏响应式jQuery图片左右滚动代码</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/owl.carousel.css" type="text/css" rel="stylesheet" />
<link href="css/owl.theme.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="owl-demo" class="owl-carousel">
<div class="item"><img class="lazyOwl" data-src="images/owl1.jpg" alt="素材"></div>
<div class="item"><img class="lazyOwl" data-src="images/owl2.jpg" alt="素材"></div>
<div class="item"><img class="lazyOwl" data-src="images/owl3.jpg" alt="素材"></div>
<div class="item"><img class="lazyOwl" data-src="images/owl4.jpg" alt="素材"></div>
<div class="item"><img class="lazyOwl" data-src="images/owl5.jpg" alt="素材"></div>
<div class="item"><img class="lazyOwl" data-src="images/owl6.jpg" alt="素材"></div>
<div class="item"><img class="lazyOwl" data-src="images/owl7.jpg" alt="素材"></div>
<div class="item"><img class="lazyOwl" data-src="images/owl8.jpg" alt="素材"></div>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.js"></script>
<style>
*{margin:0;padding:0;list-style:none;border:none;}
#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items : 4,
lazyLoad : true,
navigation : true
});
});
</script>
</body>
</html>
演示地址及官方地址：http://www.owlgraphic.com/owlcarousel/
也可以使用JS框架，结合jquery的焦点图插件carousel实现。
Hammer.js介绍：http://hammerjs.github.io/
var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
console.log(ev);
});
示例代码：
<div id="test" class="test"></div>
<script type="text/javascript">
//创建一个新的hammer对象并且在初始化时指定要处理的dom元素
var hammertime = new Hammer(document.getElementById("test"));
//为该dom元素指定触屏移动事件
hammertime.on("pan", function (ev) {
//控制台输出
console.log(ev);
});
</script>
相关JS插件及源码：carousel_demo.rar owl.carousel.zip hammer.rar
关键词：手机触屏滑动,滑动插件,jquery,carousel
