<!doctype html>
<html lang="zh">
<head>
<meta 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">
<title>jQuery幻灯片图片切换插件Slippry</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/slippry.css">
<style type="text/css">
*{padding: 0;margin:0;}
ul{list-style: none;}
.thumb-box {
padding: 1.4em 0 1em;
margin-left: -1%;
width: 102%;}
.thumb-box .thumbs {
overflow: hidden;
*zoom: 1;
}
.thumb-box .thumbs li {
float: left;
width: 25%;
text-align: center;
padding: 0 1%;}
.thumb-box .thumbs li img {
width: 100%;
opacity: .8;
-moz-transition: opacity 0.32s;
-o-transition: opacity 0.32s;
-webkit-transition: opacity 0.32s;
transition: opacity 0.32s;
border-bottom: 4px solid transparent;
}
.thumb-box .thumbs li img.active {
border-color: #31ACE2;
opacity: 1;
}
.thumb-box .thumbs li:hover img {
opacity: 1;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="htmleaf-content">
<ul id="thumbnails">
<li>
<a href="#slide1">
<img src="img/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>">
</a>
</li>
<li>
<a href="#slide2">
<img src="img/image-2.jpg" alt="This is caption 2">
</a>
</li>
<li>
<a href="#slide3">
<img src="img/image-3.jpg" alt="And this is some very long caption for slide 3. Yes, really long.">
</a>
</li>
<li>
<a href="#slide4">
<img src="img/image-4.jpg" alt="And this is some very long caption for slide 4.">
</a>
</li>
</ul>
<div class="thumb-box">
<ul class="thumbs">
<li><a href="#1" data-slide="1"><img src="img/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>"></a></li>
<li><a href="#2" data-slide="2"><img src="img/image-2.jpg" alt="This is caption 2"></a></li>
<li><a href="#3" data-slide="3"><img src="img/image-3.jpg" alt="And this is some very long caption for slide 3. Yes, really long."></a></li>
<li><a href="#4" data-slide="4"><img src="img/image-4.jpg" alt="And this is some very long caption for slide 4."></a></li>
</ul>
</div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/slippry.min.js"></script>
<script>
var thumbs = jQuery('#thumbnails').slippry({
// general elements & wrapper
slippryWrapper: '<div class="slippry_box thumbnails" />',
// options
transition: 'horizontal',
pager: false,
auto: false,
onSlideBefore: function (el, index_old, index_new) {
jQuery('.thumbs a img').removeClass('active');
jQuery('img', jQuery('.thumbs a')[index_new]).addClass('active');
}
});
jQuery('.thumbs a').click(function () {
thumbs.goToSlide($(this).data('slide'));
return false;
});
</script>
<div style="text-align:center;margin:20px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>
</html>
jQuery幻灯片图片切换插件Slippry.zip
版权申诉
124 浏览量
2023-09-25
13:41:42
上传
评论
收藏 400KB ZIP 举报
jQuery幻灯片图片切换插件Slippry.zip （12个子文件） 
js 
slippry.min.js 12KB jquery-2.1.1.min.js 82KB slippry.js 25KB img 
image-1.jpg 75KB image-3.jpg 64KB image-4.jpg 124KB image-2.jpg 93KB css slippry.css 11KB default.css 6KB
index.html 3KB images 
arrows.svg 844B
sy-loader.gif 2KB资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5851
