jquery焦点图插件carousel 支持手机触屏滑动

发布时间:2015-08-28 12:56 | 人气数:339

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