<!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">
*{margin:0;padding:0;list-style-type:none;}
#owl-demo img{border:0 none;}
#owl-demo{position:relative;width:1200px;height:410px;padding-bottom:100px;margin:40px auto 0 auto;}
#owl-demo ul{margin:-10px -10px 0 0;overflow:hidden;zoom:1;}
#owl-demo li{position:relative;float:left;margin:10px 10px 0 0;overflow:hidden;_display:inline;}
#owl-demo .li1{width:660px;height:410px;}
#owl-demo .li2{width:530px;height:230px;}
#owl-demo .li3{width:260px;height:170px;}
#owl-demo .txt{position:absolute;left:0;bottom:-86px;_bottom:-1px;width:100%;padding:6px 0;font-size:12px;color:#fff;background:url(images/overlay.png);background:rgba(0, 0, 0, .7);transition:bottom 0.3s ease-out 0s;}
#owl-demo h3{padding:0 15px;font-family:"Microsoft Yahei";font-size:18px;font-weight:500;}
#owl-demo .li1 .txt{bottom:0;}
#owl-demo .li1 h3{padding:0 25px;font-size:28px;}
#owl-demo p{margin-top:4px;padding:0 25px 5px;}
#owl-demo a{color:#fff;text-decoration:none;}
#owl-demo li:hover .txt{bottom:0;}
/* 缩略图 */
.owl-pagination{position:absolute;left:0;bottom:0;width:100%;height:80px;text-align:center;}
.owl-page{position:relative;display:inline-block;width:45px;height:45px;margin:0 5px;border-radius:80px;*background-image:url(images/bg15.png);*display:inline;*zoom:1;vertical-align:middle;overflow:hidden;}
.owl-page img{width:100%;height:100%;border-radius:80px;}
.owl-pagination .active{width:80px;height:80px;}
.owl-pagination span{position:absolute;left:0;top:0;width:45px;height:45px;*background-image:url(images/ico_clip_s.png);_background-image:none;}
.owl-pagination .active span{width:80px;height:80px;background-image:url(images/ico_clip.png);_background-image:none;}
/* 左右箭头 */
.owl-buttons div{position:absolute;top:50%;width:52px;height:81px;margin-top:-90px;text-indent:-9999px;background-image:url(images/arrow.png);transition:background-position 0.2s ease-out 0s;}
.owl-prev{left:-60px;background-position:0 0;}
.owl-next{right:-60px;background-position:right 0;}
.owl-prev:hover{background-position:-53px 0;}
.owl-next:hover{background-position:-122px 0;}
</style>
<link rel="stylesheet" href="css/owl.carousel.css" type="text/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,
afterInit: function(){
var $t = $('.owl-pagination span');
$t.each(function(i){
$(this).before('<img src="img/t' + (i+1) + '.jpg">');
})
}
});
});
</script>
</head>
<body>
<!-- Demo -->
<div id="owl-demo" class="owl-carousel">
<div class="itme">
<ul>
<li class="li1">
<a href="http://www.moobnn.com"><img src="img/a1.jpg" alt=""></a>
<div class="txt">
<h3><a href="http://www.moobnn.com">阿根廷备战 队友倒地引梅西大笑</a></h3>
<p>北京时间6月13日，阿根廷队训练备战，众将心情轻松，训练中，队友摔倒引梅西大笑。</p>
</div>
</li>
<li class="li2">
<a href="http://www.moobnn.com"><img src="img/b1.jpg" alt=""></a>
<div class="txt">
<h3><a href="http://www.moobnn.com">葡萄牙备战 C罗情绪激动对队友指手画脚</a></h3>
</div>
</li>
<li class="li3">
<a href="http://www.moobnn.com"><img src="img/c1.jpg" alt=""></a>
<div class="txt">
<h3><a href="http://www.moobnn.com">鲁尼投入训练不敢怠慢</a></h3>
</div>
</li>
<li class="li3">
<a href="http://www.moobnn.com"><img src="img/c2.jpg" alt=""></a>
<div class="txt">
<h3><a href="http://www.moobnn.com">巴神备战炫酷墨镜拉风</a></h3>
</div>
</li>
</ul>
</div>
<div class="itme">
<ul>
<li class="li1">
<a href="http://www.moobnn.com"><img src="img/a2.jpg" alt=""></a>
<div class="txt">
<h3><a href="http://www.moobnn.com">荷兰5-1血洗西班牙 罗本范佩西梅开二度</a></h3>
<p>6月14日凌晨，西班牙队迎战荷兰队，荷兰5-1逆转获胜。范佩西罗本梅开二度，德弗里头球破门。</p>
</div>
</li>
<li class="li2">
<a href="http://www.moobnn.com"><img src="img/b2.jpg" alt=""></a>
<div class="txt">
<h3><a href="http://www.moobnn.com">西荷大战 橙衣球迷＂巨胸＂造型抢镜</a></h3>
</div>
</li>
<li class="li3">
<a href="http://www.moobnn.com"><img src="img/c3.jpg" alt=""></a>
<div class="txt">
<h3><a href="http://www.moobnn.com">哈维重演卡纳瓦罗悲剧</a></h3>
</div>
</li>
<li class="li3">
<a href="http://www.moobnn.com"><img src="img/c4.jpg" alt=""></a>
<div class="txt">
<h3><a href="http://www.moobnn.com">科比观西荷战疑似爆粗</a></h3>
</div>
</li>
</ul>
</div>
<div class="itme">
<ul>
<li class="li1">
<a href="http://www.moobnn.com"><img src="img/a3.jpg" alt=""></a>
<div class="txt">
<h3><a href="http://www.moobnn.com">两度献唱世界杯的洛佩兹 身材惊呆小贝</a></h3>
<p>1994年曾为美国世界杯献声，2014年以出位着装现场演唱巴西世界杯主题曲。</p>
</div>
</li>
<li class="li2">
<a href="http://www.moobnn.com"><img src="img/b3.jpg" alt=""></a>
<div class="txt">
<h3><a href="http://www.moobnn.com">世界杯女主播太太团 斯内德妻子小三逆袭</a></h3>
</div>
</li>
<li class="li3">
<a href="http://www.moobnn.com"><img src="img/c5.jpg" alt=""></a>
<div class="txt">
<h3><a href="http://www.moobnn.com">英格兰太太团声名狼藉</a></h3>
</div>
</li>
<li class="li3">
<a href="http://www.moobnn.com"><img src="img/c6.jpg" alt=""></a>
<div class="txt">
<h3><a href="http://www.moobnn.com">本田德罗巴领衔型男PK</a></h3>
</div>
</li>
</ul>
</div>
<div class="itme">
<ul>
<li class="li1">
<a href="http://www.moobnn.com"><img src="img/a4.jpg" alt=""></a>
<div class="txt">
<h3><a href="http://www.moobnn.com">日本混血名模私房写真助威蓝武士</a></h3>
<p>日本-加拿大混血名模maggy为《GQ》杂志拍摄私房写真，爱好体育的她曾采访过香川真司。</p>
</div>
</li>
<li class="li2">
<a href="http://www.moobnn.com"><img src="img/b4.jpg" alt=""></a>
<div class="txt">
<h3><a href="http://www.moobnn.com">比利时小姐举行内衣足球赛 应景世界杯</a></h3>
</div>
</li>
<li class="li3">
<a href="http://www.moobnn.com"><img src="img/c7.jpg" alt=""></a>
<div class="txt">
<h3><a href="http://www.moobnn.com">GQ里约最性感海滩特辑</a></h3>
</div>
</li>
<li class="li3">
<a href="http://www.moobnn.com"><img src="img/c8.jpg" alt=""></a>
<div class="txt">
<h3><a href="http://www.moobnn.com">央五女主播扮足球宝贝</a></h3>
</div>
</li>
</ul>
</div>
<div class="itme">
<ul>
<li class="li1">
<a href="http://www.moobnn.com"><img src="img/a5.jpg" alt=""></a>
<div class="txt">
<h3><a href="http://www.moobnn.com">空姐变身足球宝贝 万米高空造势世界杯</a></h3>
<p>中国云南某航空公司航班上，空姐穿着巴西队服为旅客服务。</p>
</div>
</li>
<li class="li2">
<a href="http://www.moobnn.com"><img src="img/b5.jpg" alt=""></a>
<div class="txt">
<h3><a href="http://www.moobnn.com">孔卡
多图多屏jQuery幻灯片代码.zip
版权申诉
42 浏览量
2022-11-25
10:22:45
上传
评论
收藏 908KB ZIP 举报
多图多屏jQuery幻灯片代码.zip （45个子文件） 
多图多屏jQuery幻灯片代码 
多图多屏jQuery幻灯片代码.jpg 74KB jiaoben3070 css 
owl.transitions.css 4KB owl.carousel.css 2KB owl.theme.css 2KB images 
bg17.png 946B overlay.png 259B arrow.png 3KB bg15.png 221B bg18.png 972B Thumbs.db 18KB bg19.png 1KB ico_clip.png 1KB wc_spr_02.png 21KB ico_clip_s.png 569B bg16.png 266B bg20.png 994B img c3.jpg 17KB t2.jpg 4KB b2.jpg 41KB b1.jpg 28KB a1.jpg 86KB a2.jpg 116KB c1.jpg 11KB c2.jpg 17KB c10.jpg 14KB c4.jpg 10KB b5.jpg 36KB a5.jpg 79KB t5.jpg 4KB t3.jpg 4KB c5.jpg 21KB c7.jpg 12KB b4.jpg 35KB c8.jpg 9KB t1.jpg 4KB a4.jpg 62KB a3.jpg 73KB c9.jpg 21KB t4.jpg 3KB b3.jpg 31KB c6.jpg 11KB
index.html 9KB js owl.carousel.min.js 23KB jquery-1.8.3.min.js 91KB owl.carousel.js 53KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
最新资源
- 基于C++的二叉排序树（免费提供源码）
- demo(1).zip
- 网页版扫雷image文件
- matlab+数据预处理+ARIMA预测+异常值+检测+适用于各种类型的数据集
- mubanyuanshizhan-0604-24
- Python旅游数据爬虫及可视化展示源码
- 基于MFC恶意PE,Android签名流检测系统框架 vs2022 + c/c++ + mfc + PE + APK
- 基于MFC恶意文件检测系统 框架 vs2022 + c/c++ + hook + PE + inject + 动态调试工具Imm
- 基于MFC恶意文件检测系统框架 vs2022 + c/c++ + hook + PE + inject + 动态调试工具Imm
- 八路抢答器电子工艺实习报告
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
