本文介绍OwlCarousel新的幻灯片效果,之前介绍了OwlCarousel演示10种不同的调用方法 http://www.sucaihuo.com/js/230.html,OwlCarousel也有丰富的API。
HTML
<div id="owl-demo" class="owl-carousel">
<a class="item" href="http://www.sucaihuo.com/" target="_blank"><img src="img/5.jpg" alt=""><b></b><span>锐体育:回望1958年世界杯</span></a>
<a class="item" href="http://www.sucaihuo.com/" target="_blank"><img src="img/6.jpg" alt=""><b></b><span>搜狐视频《世界杯特别报道》 发布会众星云集</span></a>
<a class="item" href="http://www.sucaihuo.com/" target="_blank">
<img src="img/7.jpg" alt=""><b></b><span>梅西&C罗谁能笑傲巴西世界杯 </span>
</a>
......
</div>
owlCarousel插件调用:
$(function() {
$('#owl-demo').owlCarousel({
items: 1,
navigation: true,
navigationText: ["上一个", "下一个"],
autoPlay: true,
stopOnHover: true
}).hover(function() {
$('.owl-buttons').show();
},
function() {
$('.owl-buttons').hide();
});
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791