首页 > 代码库 > Slicebox - 3D Image Slider 实例四
Slicebox - 3D Image Slider 实例四
<!DOCTYPE html> <html lang="en"> <head> <title>Slicebox - 3D Image Slider 实例四丨</title> <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"> <meta name="description" content="Slicebox - 3D Image Slider with Fallback" /> <meta name="keywords" content="jquery, css3, 3d, webkit, fallback, slider, css3, 3d transforms, slices, rotate, box, automatic" /> <meta name="author" content="Pedro Botelho for Codrops" /> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="/imagesforcode/201212/4480/demo.css" /> <link rel="stylesheet" type="text/css" href="/imagesforcode/201212/4480/slicebox.css" /> <link rel="stylesheet" type="text/css" href="/imagesforcode/201212/4480/custom.css" /> <script type="text/javascript" src="/imagesforcode/201212/4480/modernizr.custom.46884.js"></script> </head> <body> <br><font color=black>▲ 目前IE8及以前版本不兼容CSS3，请使用IE9/火狐/Chrome浏览器运行本效果。/font> <div class="container"> Slicebox · A fresh 3D image slider with graceful fallback <div class="wrapper"> <ul id="sb-slider" class="sb-slider"> <li> <a href="#nogo" target="_blank"><img src="/images/1.jpg" alt="image1"/></a> <div class="sb-description"> <h3>红叶传情</h3> </div> </li> <li> <a href="#nogo" target="_blank"><img src="/images/2.jpg" alt="image2"/></a> <div class="sb-description"> <h3>野花绽放</h3> </div> </li> <li> <a href="#nogo" target="_blank"><img src="/images/3.jpg" alt="image1"/></a> <div class="sb-description"> <h3>往事如茶</h3> </div> </li> <li> <a href="#nogo" target="_blank"><img src="/images/4.jpg" alt="image1"/></a> <div class="sb-description"> <h3>油菜花开</h3> </div> </li> <li> <a href="#nogo" target="_blank"><img src="/images/5.jpg" alt="image1"/></a> <div class="sb-description"> <h3>玫瑰情思1</h3> </div> </li> <li> <a href="#nogo" target="_blank"><img src="/images/6.jpg" alt="image1"/></a> <div class="sb-description"> <h3>玫瑰情思2</h3> </div> </li> <li> <a href="#nogo" target="_blank"><img src="/images/7.jpg" alt="image1"/></a> <div class="sb-description"> <h3>玫瑰情思3</h3> </div> </li> </ul> <div id="shadow" class="shadow"></div> <div id="nav-arrows" class="nav-arrows"> <a href="#">Next</a> <a href="#">Previous</a> </div> </div><!-- /wrapper --> <p class="info"><strong>实例 4:</strong> Same like example example 3, with a higher disperse factor</p> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="/imagesforcode/201212/4480/jquery.slicebox.js"></script> <script type="text/javascript"> $(function() { var Page = (function() { var $navArrows = $( ‘#nav-arrows‘ ).hide(), $shadow = $( ‘#shadow‘ ).hide(), slicebox = $( ‘#sb-slider‘ ).slicebox( { onReady : function() { $navArrows.show(); $shadow.show(); }, orientation : ‘r‘, cuboidsRandom : true, disperseFactor : 30 } ), init = function() { initEvents(); }, initEvents = function() { // add navigation events $navArrows.children( ‘:first‘ ).on( ‘click‘, function() { slicebox.next(); return false; } ); $navArrows.children( ‘:last‘ ).on( ‘click‘, function() { slicebox.previous(); return false; } ); }; return { init : init }; })(); Page.init(); }); </script> </body> </html>
Slicebox - 3D Image Slider 实例四
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。