制作搜狐2014巴西世界杯专题幻灯片
简介
本文介绍使用 jQuery 幻灯片插件 Owl Carousel 制作搜狐2014巴西世界杯专题幻灯片。
兼容
浏览器兼容:兼容 IE6、IE7 及以上版本和其他主流浏览器。
使用方法
1、引入文件
<link rel="stylesheet" href="css/owl.carousel.css"> <script src="js/jquery.min.js"></script> <script src="js/owl.carousel.js"></script>
2、HTML
<div id="owl-demo" class="owl-carousel"> <a class="item" href="//www.dowebok.com/"> <img src="img/1.jpg" alt=""> <b></b><span>巴西训练内马尔受伤 吓坏队友</span> </a> <a class="item" href="//www.dowebok.com/"> <img src="img/2.jpg" alt=""> <b></b><span>搜狐直击德国训练 众星拼抢激烈</span> </a> <a class="item" href="//www.dowebok.com/"> <img src="img/3.jpg" alt=""> <b></b><span>西班牙备战演功夫足球 哈维蝎子摆尾</span> </a> <a class="item" href="//www.dowebok.com/"> <img src="img/4.jpg" alt=""> <b></b><span>印第安美女追捧德国 特色服饰助威抢镜</span> </a> <a class="item" href="//www.dowebok.com/"> <img src="img/5.jpg" alt=""> <b></b><span>锐体育:回望1958年世界杯</span> </a> <a class="item" href="//www.dowebok.com/"> <img src="img/6.jpg" alt=""> <b></b><span>搜狐视频《世界杯特别报道》 发布会众星云集</span> </a> <a class="item" href="//www.dowebok.com/"> <img src="img/7.jpg" alt=""> <b></b><span>梅西&C罗谁能笑傲巴西世界杯</span> </a> </div>
为兼容 IE 低版本,添加了一个额外的标签 b,用作黑色半透明背景。如果不需要兼容 IE 低版本,可以使用 rgba。
3、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); }
4、JavaScript
$(function(){ $('#owl-demo').owlCarousel({ items: 1, navigation: true, navigationText: ["上一个","下一个"], autoPlay: true, stopOnHover: true }).hover(function(){ $('.owl-buttons').show(); }, function(){ $('.owl-buttons').hide(); }); });
额外添加了 hover 事件,让上一个、下一个按钮鼠标移入显示、移出隐藏。