jQuery 3D效果的幻灯片插件

        带阴影效果，基于jQuery和html5和css3的3D切换效果的图片轮播插件代码，支持自动滚动和手动滚动，下面还带有进度条，非常漂亮。而且，虽然说是基于css3和html5的，但是在不支持css3和html5的浏览器上也能滚动，只是不再支持3D切换效果，但是这已经很不错了。
1、将相关图片放入您的images文件夹。

2、在head引入screen.css，注意背景图片的相对位置。

3、在需要使用本插件的地方加入下面的html代码：

<div id="page">
	<div id="viewport-shadow" class="trans">
		<a href="#" id="prev" title="go to the next slide" class="trans"></a>
		<a href="#" id="next" title="go to the next slide" class="trans"></a>
		<div id="viewport">
			<div id="box">
				<figure class="slide"><a href="https://5.jimth.com" title="网页模板" target="_blank"><img src="images/focus_1.jpg"></a></figure>
				<figure class="slide"><a href="https://5.jimth.com" title="网页模板" target="_blank"><img src="images/focus_2.jpg"></a></figure>
				<figure class="slide"><a href="https://5.jimth.com" title="网页模板" target="_blank"><img src="images/focus_3.jpg"></a></figure>
				<figure class="slide"><img src="images/focus_4.jpg"></figure>
				<figure class="slide"><img src="images/focus_5.jpg"></figure>
			</div>
		</div>
		<div id="time-indicator"></div>
	</div>
	<div 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>
	</div>
</div>

4、在上面的html代码后面引入相关的js文件：

<script type="text/javascript" src="https://5.jimth.com/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/modernizr.min.js"></script>	
<script type="text/javascript" src="js/box-slider-all.jquery.min.js"></script>

5、最后，调用代码：

	var $box = $('#box'), $indicators = $('.goto-slide'), $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: '891px'}, slideInterval);
	};

	// initialize the plugin with the desired settings
	$box.boxSlider({
		speed: 1000,
		autoScroll: true,
		timeout: slideInterval,
		next: '#next',
		prev: '#prev',
		pause: '#pause',
		effect: 'scrollVert3d', /*scrollVert3d and scrollHorz3d*/ 
		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();
	});