首页 > 特效插件 > 滚动轮播 >  jQuery 3D效果的幻灯片插件正文

jQuery 3D效果的幻灯片插件

特效介绍
jQuery 3D效果的幻灯片插件

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

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

3、在需要使用本插件的地方加入下面的html代码:
01<div id="page">
02    <div id="viewport-shadow" class="trans">
03        <a href="#" id="prev" title="go to the next slide" class="trans"></a>
04        <a href="#" id="next" title="go to the next slide" class="trans"></a>
05        <div id="viewport">
06            <div id="box">
07                <figure class="slide"><a href="http://www.5imoban.net" title="网页模板" target="_blank"><img src="images/focus_1.jpg"></a></figure>
08                <figure class="slide"><a href="http://www.5imoban.net" title="网页模板" target="_blank"><img src="images/focus_2.jpg"></a></figure>
09                <figure class="slide"><a href="http://www.5imoban.net" title="网页模板" target="_blank"><img src="images/focus_3.jpg"></a></figure>
10                <figure class="slide"><img src="images/focus_4.jpg"></figure>
11                <figure class="slide"><img src="images/focus_5.jpg"></figure>
12            </div>
13        </div>
14        <div id="time-indicator"></div>
15    </div>
16    <div class="slider-controls">
17        <ul id="controls">
18            <li><a class="goto-slide current" href="#" data-slideindex="0"></a></li>
19            <li><a class="goto-slide" href="#" data-slideindex="1"></a></li>
20            <li><a class="goto-slide" href="#" data-slideindex="2"></a></li>
21            <li><a class="goto-slide" href="#" data-slideindex="3"></a></li>
22            <li><a class="goto-slide" href="#" data-slideindex="4"></a></li>
23        </ul>
24    </div>
25</div>
4、在上面的html代码后面引入相关的js文件:
1<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
2<script type="text/javascript" src="js/modernizr.min.js"></script> 
3<script type="text/javascript" src="js/box-slider-all.jquery.min.js"></script>
5、最后,调用代码:
01var $box = $('#box'), $indicators = $('.goto-slide'), $timeIndicator = $('#time-indicator'), slideInterval = 5000;
02 
03var switchIndicator = function ($c, $n, currIndex, nextIndex) {
04    $timeIndicator.stop().css('width', 0);
05    $indicators.removeClass('current').eq(nextIndex).addClass('current');
06};
07 
08var startTimeIndicator = function () {
09    $timeIndicator.animate({width: '891px'}, slideInterval);
10};
11 
12// initialize the plugin with the desired settings
13$box.boxSlider({
14    speed: 1000,
15    autoScroll: true,
16    timeout: slideInterval,
17    next: '#next',
18    prev: '#prev',
19    pause: '#pause',
20    effect: 'scrollVert3d', /*scrollVert3d and scrollHorz3d*/
21    blindCount: 15,
22    onbefore: switchIndicator,
23    onafter: startTimeIndicator
24});
25 
26startTimeIndicator();
27 
28// pagination isn't built in simply because it's easy to
29// roll your own with the plugin API methods
30$('#controls').on('click', '.goto-slide', function (ev){
31    $box.boxSlider('showSlide', $(this).data('slideindex'));
32    ev.preventDefault();
33});