tab滑动门

效果图:

html

<div id="owl-demo" class="owl-carousel">
<a class="item"><img src="http://www.eol.cn/js/common/data/images/pic01.jpg" alt=""></a>
<a class="item"><img src="http://www.eol.cn/js/common/data/images/fullimage1.jpg" alt=""></a>
<a class="item"><img src="http://www.eol.cn/js/common/data/images/fullimage2.jpg" alt=""></a>
<a class="item"><img src="http://www.eol.cn/js/common/data/images/fullimage3.jpg" alt=""></a>
</div>

css

额外新增一个插件主要的css文件,放到页面head中,或者把样式代码复制,放到主要css文件中
<link rel="stylesheet" type="text/css" href="http://www.eol.cn/js/common/plugin/css/owl.carousel.css">
#owl-demo {
width: 900px;
margin-left: auto;
margin-right: auto;
}
#owl-demo .item {
display: block;
}
#owl-demo img {
display: block;
width: 100%;
}

js

<script type="text/javascript" src="http://www.eol.cn/js/common/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.eol.cn/js/common/plugin/owl.carousel.min.js"></script>
<script>
$(function(){
$('#owl-demo').owlCarousel({
items: 1,
autoPlay: true,
navigation: true,
autoHeight: true,
lazyLoad: true,
navigationText: ["上一个","下一个"]
});
});
</script>

插件配置

1.拷贝对应html,css,js代码到页面中,js代码写在页面最底部
2.插件配置:

$('#owl-demo').owlCarousel({
items: 1, // 一行显示几张图片,默认为5张
autoPlay: true, //是否自动播放,默认为false
navigation: true, //是否有点,默认为false
autoHeight: true, //是否自适应高度,默认为false
lazyLoad: true, //是否使用延迟加载,默认为false
// jsonPath: 'json/data.json', //调用json文件数据
navigationText: ["上一个","下一个"] //左右切换按钮自定义,自定义按钮位置的的话修改css
});

3.如果以json形式加载,则json文件为

{
"owl" : [
{"item" : "<a class="item"><img src="http://www.eol.cn/js/common/data/images/pic01.jpg" alt=""></a>"},
{"item" : "<a class="item"><img src="http://www.eol.cn/js/common/data/images/pic01.jpg" alt=""></a>"},
{"item" : "<a class="item"><img src="http://www.eol.cn/js/common/data/images/pic01.jpg" alt=""></a>"},
{"item" : "<a class="item"><img src="http://www.eol.cn/js/common/data/images/pic01.jpg" alt=""></a>"}
]
}

js代码为

$('#owl-demo').owlCarousel({
jsonPath: 'json/data.json'
});

对应html代码为

<div id="owl-demo" class="owl-carousel">
</div>

4.自定义json,json文件为

{
"items" : [
{
"img": "http://www.eol.cn/js/common/data/images/pic01.jpg",
"alt" : "草原行",
"link" : "http://www.eol.cn"
},
{
"img": "http://www.eol.cn/js/common/data/images/pic01.jpg",
"alt" : "草原行",
"link" : "http://www.eol.cn"
}
]
}

js代码为

$('#owl-demo').owlCarousel({
items: 4,
jsonPath: 'json/customData.json',
jsonSuccess: customDataSuccess
});
function customDataSuccess(data){
var content = '';
for(var i in data['items']){
var img = data['items'][i].img;
var alt = data['items'][i].alt;
var link = data['items'][i].link;
content += '<a class="item" href="' +link+ '"><img src="' +img+ '" alt="' +alt+ '">';
}
$('#owl-demo').html(content);
}

html代码为

<div id="owl-demo" class="owl-carousel">
</div>