<!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>
<link href="css/pagestyle.css" type="text/css" rel="stylesheet" />
<!--弹出幻灯片样式-->
<link href="css/fullscreenstyle.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fullscreenslides.js"></script>
<script type="text/javascript">
$(function(){
$('.image img').fullscreenslides();
var $container = $('#fullscreenSlideshowContainer');
$container
.bind("init", function() {
$container
.append('<div class="ui" id="fs-close">×</div>')
.append('<div class="ui" id="fs-loader">Loading...</div>')
.append('<div class="ui" id="fs-prev"><</div>')
.append('<div class="ui" id="fs-next">></div>')
.append('<div class="ui" id="fs-caption"><span></span></div>');
$('#fs-prev').click(function(){
$container.trigger("prevSlide");
});
$('#fs-next').click(function(){
$container.trigger("nextSlide");
});
$('#fs-close').click(function(){
$container.trigger("close");
});
})
.bind("startLoading", function() {
$('#fs-loader').show();
})
.bind("stopLoading", function() {
$('#fs-loader').hide();
})
.bind("startOfSlide", function(event, slide) {
$('#fs-caption span').text(slide.title);
$('#fs-caption').show();
})
.bind("endOfSlide", function(event, slide) {
$('#fs-caption').hide();
});
});
</script>
</head>
<body>
<div class="wrapper">
<h1>jQuery全屏幻灯片</h1>
<div class="image">
<a rel="gallery" title="在英格兰科茨沃尔德,百老汇大厦" href="images/b1.jpg"><img src="images/a1.jpg"></a>
<div class="caption">在英格兰科茨沃尔德,百老汇大厦<br>来自：Wikimedian Newton2</div>
</div>
<div class="image">
<a rel="gallery" title="纽约的夜晚,HDR" href="images/b2.jpg"><img src="images/a2.jpg"></a>
<div class="caption">纽约的夜晚,HDR<br>来自：保罗Barcellos Jr</div>
</div>
<div class="image">
<a rel="gallery" title="红松鼠冬天耳塔夫茨与明显" href="images/b3.jpg"><img src="images/a3.jpg"></a>
<div class="caption"> 红松鼠冬天耳塔夫茨与明显<br>来自：Wikimedian </div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jquery点击小图弹出全屏幻灯片代码.zip
版权申诉
195 浏览量
2022-11-20
22:07:57
上传
评论
收藏 330KB ZIP 举报
jquery点击小图弹出全屏幻灯片代码.zip （12个子文件） 
jquery点击小图弹出全屏幻灯片代码 
jquery点击小图弹出全屏幻灯片代码.jpg 54KB jiaoben2998 css 
fullscreenstyle.css 803B pagestyle.css 525B images b2.jpg 57KB b1.jpg 94KB a1.jpg 15KB a2.jpg 12KB a3.jpg 13KB b3.jpg 56KB
index.html 3KB js jquery.fullscreenslides.js 11KB jquery.min.js 94KB资源评论
