<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery 3D 图片播放焦点图插件Adaptor在线演示</title>
<link href="css/screen.css" rel="stylesheet">
<script src="js/lib/modernizr.min.js"></script>
</head>
<body>
<div id="page">
<section>
<div id="viewport-shadow">
<a href="#" id="prev" title="go to the next slide"></a>
<a href="#" id="next" title="go to the next slide"></a>
<div id="viewport">
<div id="box">
<figure class="slide">
<img src="img/the-battle.jpg">
</figure>
<figure class="slide">
<img src="img/hiding-the-map.jpg">
</figure>
<figure class="slide">
<img src="img/theres-the-buoy.jpg">
</figure>
<figure class="slide">
<img src="img/finding-the-key.jpg">
</figure>
<figure class="slide">
<img src="img/lets-get-out-of-here.jpg">
</figure>
</div>
</div>
<div id="time-indicator"></div>
</div>
<footer>
<nav class="slider-controls">
<ul id="controls">
<li><a class="goto-slide current" href="#" data-slideindex="0"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="1"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="2"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="3"></a></li>
<li><a class="goto-slide" href="#" data-slideindex="4"></a></li>
</ul>
</nav>
</footer>
</section>
<aside id="effect-switcher">
<h2>Select effect</h2>
<ul id="effect-list">
<li><a href="#" class="effect current" data-fx="scrollVert3d">Vertical 3D scroll</a></li>
<li><a href="#" class="effect" data-fx="scrollHorz3d">Horizontal 3D scroll</a></li>
<li><a href="#" class="effect" data-fx="scrollVert">Vertical scroll</a></li>
<li><a href="#" class="effect" data-fx="scrollHorz">Horizontal scroll</a></li>
<li><a href="#" class="effect" data-fx="blindLeft">Blind left</a></li>
<li><a href="#" class="effect" data-fx="blindDown">Blind down</a></li>
<li><a href="#" class="effect" data-fx="fade">Fade</a></li>
</ul>
</aside>
</div>
<script src="js/lib/jquery-1.7.2.min.js"></script>
<script>window.jQuery || document.write('<script src="js/lib/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/box-slider-all.jquery.min.js"></script>
<script>
$(function () {
var $box = $('#box')
, $indicators = $('.goto-slide')
, $effects = $('.effect')
, $timeIndicator = $('#time-indicator')
, slideInterval = 5000;
var switchIndicator = function ($c, $n, currIndex, nextIndex) {
$timeIndicator.stop().css('width', 0);
$indicators.removeClass('current').eq(nextIndex).addClass('current');
};
var startTimeIndicator = function () {
$timeIndicator.animate({width: '680px'}, slideInterval);
};
// initialize the plugin with the desired settings
$box.boxSlider({
speed: 1000
, autoScroll: true
, timeout: slideInterval
, next: '#next'
, prev: '#prev'
, pause: '#pause'
, effect: 'scrollVert3d'
, blindCount: 15
, onbefore: switchIndicator
, onafter: startTimeIndicator
});
startTimeIndicator();
// pagination isn't built in simply because it's easy to
// roll your own with the plugin API methods
$('#controls').on('click', '.goto-slide', function (ev) {
$box.boxSlider('showSlide', $(this).data('slideindex'));
ev.preventDefault();
});
$('#effect-list').on('click', '.effect', function (ev) {
var $effect = $(this);
$box.boxSlider('option', 'effect', $effect.data('fx'));
$effects.removeClass('current');
$effect.addClass('current');
switchIndicator(null, null, 0, 0);
ev.preventDefault();
});
});
</script>
</body>
</html>
jQuery实现的3D图片滑块焦点图特效源码
4星 · 超过85%的资源 需积分: 9 87 浏览量
2014-07-16
17:42:24
上传
评论
收藏 759KB RAR 举报 
jQuery实现的3D图片滑块焦点图特效源码.rar （29个子文件） 
jQuery实现的3D图片滑块焦点图特效源码 jQuery实现的3D图片滑块焦点图特效源码 css 
config.rb 845B img 
next-prev-sprite.png 6KB box-shadow.png 11KB next-prev-sprite-hover.png 9KB page-bg.png 1KB screen.css 6KB sass _base.scss 0B screen.scss 2KB style.css 1020B img 
theres-the-buoy.jpg 171KB finding-the-key.jpg 139KB lets-get-out-of-here.jpg 181KB hiding-the-map.jpg 109KB the-battle.jpg 100KB test jasmine-1.2.0 jasmine-html.js 19KB jasmine.css 6KB MIT.LICENSE 1KB jasmine.js 67KB
index.html 1KB spec box-slider.js 3KB index.html 4KB js box-slider.jquery.js 10KB box-slider-all.jquery.min.js 9KB effects box-slider-fx-fade.js 1KB box-slider-fx-scroll.js 2KB box-slider-fx-scroll-3d.js 6KB box-slider-fx-blinds.js 4KB lib modernizr.min.js 7KB jquery-1.7.2.min.js 93KB资源评论
zhangershan2014-07-21谢谢分享，资源显示效果很好
coast08242015-01-08效果不错，谢谢。
红面狼
- 粉丝: 61
- 资源: 89
