JavaScript
$(function(){
$('#owl-demo').owlCarousel({
items: 1,
navigation: true,
navigationText: ["上一个","下一个"],
autoPlay: true,
stopOnHover: true
}).hover(function(){
$('.owl-buttons').show();
}, function(){
$('.owl-buttons').hide();
});
});
HTML
<div id="owl-demo" class="owl-carousel">
<a class="item" href="https://www.dowebok.com/">
<img src="img/1.jpg" alt="">
<b></b><span>巴西训练内马尔受伤 吓坏队友</span>
</a>
<a class="item" href="https://www.dowebok.com/">
<img src="img/2.jpg" alt="">
<b></b><span>搜狐直击德国训练 众星拼抢激烈</span>
</a>
<a class="item" href="https://www.dowebok.com/">
<img src="img/3.jpg" alt="">
<b></b><span>西班牙备战演功夫足球 哈维蝎子摆尾</span>
</a>
<a class="item" href="https://www.dowebok.com/">
<img src="img/4.jpg" alt="">
<b></b><span>印第安美女追捧德国 特色服饰助威抢镜</span>
</a>
<a class="item" href="https://www.dowebok.com/">
<img src="img/5.jpg" alt="">
<b></b><span>锐体育:回望1958年世界杯</span>
</a>
<a class="item" href="https://www.dowebok.com/">
<img src="img/6.jpg" alt="">
<b></b><span>搜狐视频《世界杯特别报道》 发布会众星云集</span>
</a>
<a class="item" href="https://www.dowebok.com/">
<img src="img/7.jpg" alt="">
<b></b><span>梅西&C罗谁能笑傲巴西世界杯</span>
</a>
</div>
CSS
#owl-demo {
position: relative;
width: 640px;
height: 390px;
margin-left: auto;
margin-right: auto;
}
#owl-demo .item {
position: relative;
display: block;
}
#owl-demo img {
display: block;
width: 640px;
height: 390px;
}
#owl-demo b {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 78px;
background-color: #000;
opacity: .5;
filter: alpha(opacity=50);
}
#owl-demo span {
position: absolute;
left: 0;
bottom: 37px;
width: 100%;
font: 18px/32px "微软雅黑", "黑体";
color: #fff;
text-align: center;
}
.owl-pagination {
position: absolute;
left: 0;
bottom: 10px;
width: 100%;
height: 22px;
text-align: center;
}
.owl-page {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px;
background-image: url(images/bg15.png);
*display: inline;
*zoom: 1;
}
.owl-pagination .active {
width: 25px;
background-image: url(images/bg16.png);
}
.owl-buttons {
display: none;
}
.owl-buttons div {
position: absolute;
top: 50%;
width: 40px;
height: 80px;
margin-top: -40px;
text-indent: -9999px;
}
.owl-prev {
left: 0;
background-image: url(images/bg17.png);
}
.owl-next {
right: 0;
background-image: url(images/bg18.png);
}
.owl-prev:hover {
background-image: url(images/bg19.png);
}
.owl-next:hover {
background-image: url(images/bg20.png);
}