特效介绍
带阴影效果,基于jQuery和html5和css3的3D切换效果的图片轮播插件代码,支持自动滚动和手动滚动,下面还带有进度条,非常漂亮。而且,虽然说是基于css3和html5的,但是在不支持css3和html5的浏览器上也能滚动,只是不再支持3D切换效果,但是这已经很不错了。
使用方法
1、将相关图片放入您的images文件夹。
2、在head引入screen.css,注意背景图片的相对位置。
3、在需要使用本插件的地方加入下面的html代码:
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 > |
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 > |
14 | < div id = "time-indicator" ></ div > |
16 | < div class = "slider-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 > |
4、在上面的html代码后面引入相关的js文件:
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、最后,调用代码:
01 | var $box = $( '#box' ), $indicators = $( '.goto-slide' ), $timeIndicator = $( '#time-indicator' ), slideInterval = 5000; |
03 | var switchIndicator = function ($c, $n, currIndex, nextIndex) { |
04 | $timeIndicator.stop().css( 'width' , 0); |
05 | $indicators.removeClass( 'current' ).eq(nextIndex).addClass( 'current' ); |
08 | var startTimeIndicator = function () { |
09 | $timeIndicator.animate({width: '891px' }, slideInterval); |
16 | timeout: slideInterval, |
20 | effect: 'scrollVert3d' , |
22 | onbefore: switchIndicator, |
23 | onafter: startTimeIndicator |
30 | $( '#controls' ).on( 'click' , '.goto-slide' , function (ev){ |
31 | $box.boxSlider( 'showSlide' , $( this ).data( 'slideindex' )); |