网络编辑
首页

Slicebox - 3D Image Slider 特效

  1. 首页
  2. 网络编辑
  3. Slicebox - 3D Image Slider 特效

Slicebox - 3D Image Slider 特效

网络编辑 13/9/3 4.0k 1
  1. <!DOCTYPE html>
  2.     <html lang="en">
  3.     <head>
  4.     <title>Slicebox - 3D Image Slider 实例二丨芯晴网页特效丨CsrCode.CN</title>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <meta name="description" content="Slicebox - 3D Image Slider with Fallback" />
  9.     <meta name="keywords" content="jquery, css3, 3d, webkit, fallback, slider, css3, 3d transforms, slices, rotate, box, automatic" />
  10.     <meta name="author" content="Pedro Botelho for Codrops" />
  11.     <link rel="shortcut icon" href="../favicon.ico">
  12.     <link rel="stylesheet" type="text/css" href="/imagesforcode/201212/4480/demo.css" />
  13.     <link rel="stylesheet" type="text/css" href="/imagesforcode/201212/4480/slicebox.css" />
  14.     <link rel="stylesheet" type="text/css" href="/imagesforcode/201212/4480/custom.css" />
  15.     <script type="text/javascript" src="/imagesforcode/201212/4480/modernizr.custom.46884.js"></script>
  16.     </head>
  17.     <body>
  18.    
  19. <font color=black>▲　目前IE8及以前版本不兼容CSS3，请使用IE9/火狐/Chrome浏览器运行本效果。　　　　　<a href="http://qiannao.com/file/csr04/659b5a30/" target=_blank><b>点此下载本特效：4480.rar</b></a>
  20. <hr><p align="center">本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：妙味课堂</p></font>
  21.     <div class="container">
  22.     Slicebox · A fresh 3D image slider with graceful fallback
  23.     <div class="wrapper">
  24.     <ul id="sb-slider" class="sb-slider">
  25.     <li>
  26.     <a href="#nogo" target="_blank"><img src="/images/1.jpg" alt="image1"/></a>
  27.     <div class="sb-description">
  28.     <h3>红叶传情</h3>
  29.     </div>
  30.     </li>
  31.     <li>
  32.     <a href="#nogo" target="_blank"><img src="/images/2.jpg" alt="image2"/></a>
  33.     <div class="sb-description">
  34.     <h3>野花绽放</h3>
  35.     </div>
  36.     </li>
  37.     <li>
  38.     <a href="#nogo" target="_blank"><img src="/images/3.jpg" alt="image1"/></a>
  39.     <div class="sb-description">
  40.     <h3>往事如茶</h3>
  41.     </div>
  42.     </li>
  43.     <li>
  44.     <a href="#nogo" target="_blank"><img src="/images/4.jpg" alt="image1"/></a>
  45.     <div class="sb-description">
  46.     <h3>油菜花开</h3>
  47.     </div>
  48.     </li>
  49.     <li>
  50.     <a href="#nogo" target="_blank"><img src="/images/5.jpg" alt="image1"/></a>
  51.     <div class="sb-description">
  52.     <h3>玫瑰情思1</h3>
  53.     </div>
  54.     </li>
  55.     <li>
  56.     <a href="#nogo" target="_blank"><img src="/images/6.jpg" alt="image1"/></a>
  57.     <div class="sb-description">
  58.     <h3>玫瑰情思2</h3>
  59.     </div>
  60.     </li>
  61.     <li>
  62.     <a href="#nogo" target="_blank"><img src="/images/7.jpg" alt="image1"/></a>
  63.     <div class="sb-description">
  64.     <h3>玫瑰情思3</h3>
  65.     </div>
  66.     </li>
  67.     </ul>
  68.     <div id="shadow" class="shadow"></div>
  69.     <div id="nav-arrows" class="nav-arrows">
  70.     <a href="#">Next</a>
  71.     <a href="#">Previous</a>
  72.     </div>
  73.     <div id="nav-options" class="nav-options">
  74.     <span id="navPlay">Play</span>
  75.     <span id="navPause">Pause</span>
  76.     </div>
  77.     </div><!-- /wrapper -->
  78.     <p class="info"><strong>实例 2:</strong> Slideshow with play & pause and horizontal slices</p>
  79.     </div>
  80.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  81.     <script type="text/javascript" src="/imagesforcode/201212/4480/jquery.slicebox.js"></script>
  82.     <script type="text/javascript">
  83.     $(function() {
  84.     var Page = (function() {
  85.     var $navArrows = $( '#nav-arrows' ).hide(),
  86.     $navOptions = $( '#nav-options' ).hide(),
  87.     $shadow = $( '#shadow' ).hide(),
  88.     slicebox = $( '#sb-slider' ).slicebox( {
  89.     onReady : function() {
  90.     $navArrows.show();
  91.     $navOptions.show();
  92.     $shadow.show();
  93.     },
  94.     orientation : 'h',
  95.     cuboidsCount : 3
  96.     } ),
  97.     init = function() {
  98.     initEvents();
  99.     },
  100.     initEvents = function() {
  101.     // add navigation events
  102.     $navArrows.children( ':first' ).on( 'click', function() {
  103.     slicebox.next();
  104.     return false;
  105.     } );
  106.     $navArrows.children( ':last' ).on( 'click', function() {
  107.     slicebox.previous();
  108.     return false;
  109.     } );
  110.     $( '#navPlay' ).on( 'click', function() {
  111.     slicebox.play();
  112.     return false;
  113.     } );
  114.     $( '#navPause' ).on( 'click', function() {
  115.     slicebox.pause();
  116.     return false;
  117.     } );
  118.     };
  119.     return { init : init };
  120.     })();
  121.     Page.init();
  122.     });
  123.     </script>
  124.     </body>
  125.     </html>
复制代码
特效地址：http://www.csrcode.cn/article-3869-1.html

点评

我很赞同！: 5.0
xiao201261
我很赞同！: 5
测试点评加星星  发表于 14/5/10 16:06
回复 打赏举报
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
您需要登录后才可以回帖 登录 | 注册
本版积分规则
1 回复
xyz963
15/12/5 20:07:28
羡慕编程的~~~~~
回复 支持 反对 打赏 举报
MemacX
MemacX 版主
1.2k 帖子 0 日志 3 听众
作者的帖子