<!DOCTYPE html>
<html lang="en">
<head>
<title>jquery+css3圆形缩略图预览 - 网页模板</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' />
<noscript>
<style>
.cn-images img{position: relative;display: block;border-bottom: 5px solid #d0ab47;}
.cn-slideshow{height: auto;}
</style>
</noscript>
<script id="barTmpl" type="text/x-jquery-tmpl">
<div class="cn-bar">
<div class="cn-nav">
<a href="#" class="cn-nav-prev">
<span>Previous</span>
<div style="background-image:url(${prevSource});"></div>
</a>
<a href="#" class="cn-nav-next">
<span>Next</span>
<div style="background-image:url(${nextSource});"></div>
</a>
</div><!-- cn-nav -->
<div class="cn-nav-content">
<div class="cn-nav-content-prev">
<span>Previous image</span>
<h3>${prevTitle}</h3>
</div>
<div class="cn-nav-content-current">
<span>Currently viewing</span>
<h2>${currentTitle}</h2>
</div>
<div class="cn-nav-content-next">
<span>Next image</span>
<h3>${nextTitle}</h3>
</div>
</div><!-- cn-nav-content -->
</div><!-- cn-bar -->
</script>
</head>
<body>
<div class="container">
<h1>jquery+css3圆形缩略图预览</h1>
<div class="wrapper">
<div id="cn-slideshow" class="cn-slideshow">
<div class="cn-images">
<img src="images/large/1.jpg" alt="image01" title="Beautiful Scenery 1" data-thumb="images/thumbs/1.jpg" style="display:block;"/>
<img src="images/large/2.jpg" alt="image02" title="Beautiful Scenery 2" data-thumb="images/thumbs/2.jpg"/>
<img src="images/large/3.jpg" alt="image03" title="Beautiful Scenery 3" data-thumb="images/thumbs/3.jpg"/>
<img src="images/large/4.jpg" alt="image04" title="Beautiful Scenery 4" data-thumb="images/thumbs/4.jpg"/>
</div><!-- cn-images -->
</div><!-- cn-slideshow -->
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js/jquery.slideshow.js"></script>
<script type="text/javascript">
$(function() {
$('#cn-slideshow').slideshow();
});
</script>
<div style="text-align:center;clear:both">
<p>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p><br>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jq圆形缩略图预览 jquery+css3圆形缩略图预览.zip
版权申诉
80 浏览量
2022-11-24
12:31:01
上传
评论
收藏 273KB ZIP 举报
jq圆形缩略图预览 jquery+css3圆形缩略图预览.zip （19个子文件） 
jq圆形缩略图预览 jquery+css3圆形缩略图预览 jiaoben826 css 
reset.css 654B demo.css 2KB style.css 4KB images 
next.png 456B
ajax-loader.gif 4KB prev.png 439B bar.png 213B
cardboard.jpg 17KB thumbs 2.jpg 4KB 1.jpg 5KB 3.jpg 3KB 4.jpg 6KB large 2.jpg 65KB 1.jpg 63KB 3.jpg 38KB 4.jpg 54KB
index.html 4KB js jquery.slideshow.js 6KB jquery.tmpl.min.js 6KB资源评论
