两款国外超酷HTML5全屏幻灯片切换特效.zip资源-CSDN文库

共19个文件

jpg：5个

js：4个

css：4个

版权申诉

jquery代码

jquery特效

jquery插件

14 浏览量 2023-09-25 13:45:40 上传评论收藏 448KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

两款国外超酷HTML5全屏幻灯片切换特效.zip （19个子文件）

jquery-1.8.3.min.js 91KB

modernizr.custom.79639.js 9KB

jquery.ba-cond.min.js 532B

jquery.slitslider.js 16KB

index2.html 6KB

css

style.css 2KB

demo.css 3KB

custom.css 11KB

styleNoJS.css 392B

fonts

animals-webfont.woff 47KB

animals-webfont.eot 46KB

animals-webfont.ttf 68KB

animals-webfont.svg 150KB

index.html 6KB

images

2.jpg 45KB

1.jpg 41KB

5.jpg 45KB

3.jpg 52KB

4.jpg 16KB

<!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>两款国外超酷HTML5全屏幻灯片切换特效</title> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/custom.css" /> <script type="text/javascript" src="js/modernizr.custom.79639.js"></script> <noscript> <link rel="stylesheet" type="text/css" href="css/styleNoJS.css" /> </noscript> </head> <body> <div class="container demo-1"> <nav class="codrops-demos"> <a class="current-demo" href="index.html">Demo 1</a> <a href="index2.html">Demo 2</a> </nav> <div id="slider" class="sl-slider-wrapper"> <div class="sl-slider"> <div class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2"> <div class="sl-slide-inner"> <div class="deco" data-icon="H"></div> <h2>A bene placito</h2> <blockquote><p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p><cite>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></cite></blockquote> </div> </div> <div class="sl-slide bg-2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5"> <div class="sl-slide-inner"> <div class="deco" data-icon="q"></div> <h2>Regula aurea</h2> <blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote> </div> </div> <div class="sl-slide bg-3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1"> <div class="sl-slide-inner"> <div class="deco" data-icon="O"></div> <h2>Dum spiro, spero</h2> <blockquote><p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite></blockquote> </div> </div> <div class="sl-slide bg-4" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1"> <div class="sl-slide-inner"> <div class="deco" data-icon="I"></div> <h2>Donna nobis pacem</h2> <blockquote><p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite></blockquote> </div> </div> <div class="sl-slide bg-5" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"> <div class="sl-slide-inner"> <div class="deco" data-icon="t"></div> <h2>Acta Non Verba</h2> <blockquote><p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite></blockquote> </div> </div> </div> <nav id="nav-arrows" class="nav-arrows"> <span class="nav-arrow-prev">Previous</span> <span class="nav-arrow-next">Next</span> </nav> <nav id="nav-dots" class="nav-dots"> <span class="nav-dot-current"></span> <span></span> <span></span> <span></span> <span></span> </nav> </div> </div> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.ba-cond.min.js"></script> <script type="text/javascript" src="js/jquery.slitslider.js"></script> <script type="text/javascript"> $(function() { var Page = (function() { var $navArrows = $( '#nav-arrows' ), $nav = $( '#nav-dots > span' ), slitslider = $( '#slider' ).slitslider( { onBeforeChange : function( slide, pos ) { $nav.removeClass( 'nav-dot-current' ); $nav.eq( pos ).addClass( 'nav-dot-current' ); } } ), init = function() { initEvents(); }, initEvents = function() { // add navigation events $navArrows.children( ':last' ).on( 'click', function() { slitslider.next(); return false; } ); $navArrows.children( ':first' ).on( 'click', function() { slitslider.previous(); return false; } ); $nav.each( function( i ) { $( this ).on( 'click', function( event ) { var $dot = $( this ); if( !slitslider.isActive() ) { $nav.removeClass( 'nav-dot-current' ); $dot.addClass( 'nav-dot-current' ); } slitslider.jump( i + 1 ); return false; } ); } ); }; return { init : init }; })(); Page.init(); /** * Notes: * * example how to add items: */ /* var $items = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>'); // call the plugin's add method ss.add($items); */ }); </script> </body> </html>

评论收藏

内容反馈

版权申诉