<!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>jQuery按钮控制图片切换焦点图</title>
<style type="text/css">
#owl-demo{position:relative;width:640px;height:390px;margin:20px auto 0 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);}
</style>
<link rel="stylesheet" href="css/owl.carousel.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.js"></script>
<script type="text/javascript">
$(function(){
$('#owl-demo').owlCarousel({
items: 1,
navigation: true,
navigationText: ["上一个","下一个"],
autoPlay: true,
stopOnHover: true
}).hover(function(){
$('.owl-buttons').show();
}, function(){
$('.owl-buttons').hide();
});
});
</script>
</head>
<body>
<!-- Demo -->
<div id="owl-demo" class="owl-carousel">
<a class="item" href="" target="_blank"><img src="img/1.jpg" alt=""><b></b><span>巴西训练内马尔受伤 吓坏队友</span></a>
<a class="item" href="" target="_blank"><img src="img/2.jpg" alt=""><b></b><span>搜狐直击德国训练 众星拼抢激烈</span></a>
<a class="item" href="" target="_blank"><img src="img/3.jpg" alt=""><b></b><span>西班牙备战演功夫足球 哈维蝎子摆尾</span></a>
<a class="item" href="" target="_blank"><img src="img/4.jpg" alt=""><b></b><span>印第安美女追捧德国 特色服饰助威抢镜</span></a>
<a class="item" href="" target="_blank"><img src="img/5.jpg" alt=""><b></b><span>锐体育：回望1958年世界杯</span></a>
<a class="item" href="" target="_blank"><img src="img/6.jpg" alt=""><b></b><span>搜狐视频《世界杯特别报道》 发布会众星云集</span></a>
<a class="item" href="" target="_blank"><img src="img/7.jpg" alt=""><b></b><span>梅西vs罗谁能笑傲巴西世界杯</span></a>
</div>
<!-- Demo end -->
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>
jQuery实现的按钮控制图片切换焦点图幻灯特效源码.zip （18个子文件） 
132677801659121502 css 
owl.carousel.css 1KB images 
bg17.png 946B bg15.png 221B bg18.png 972B bg19.png 1KB bg16.png 266B bg20.png 994B img 
2.jpg 46KB 1.jpg 45KB 6.jpg 84KB 3.jpg 37KB 5.jpg 36KB 4.jpg 56KB 7.jpg 83KB
index.html 3KB js owl.carousel.min.js 23KB jquery-1.8.3.min.js 91KB owl.carousel.js 52KB资源评论
