jQuery带左右按钮控制图片切换

最新推荐文章于 2024-06-21 13:57:48 发布

xxiaowen

最新推荐文章于 2024-06-21 13:57:48 发布

阅读量3.2k

点赞数

分类专栏： jquery JSP

本文链接：https://blog.csdn.net/wenzhilanyu2012/article/details/48228801

版权

JSP 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

代码如下

<!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幻灯片,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>
</body>
</html>

效果图