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

来源：互联网发布：时间同步服务器软件编辑：程序博客网时间：2024/05/01 07:27
代码如下
<!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>
效果图
注：本文来自java教程网，更多学习资源尽在java教程网
0 0