Slicebox - 3D Image Slider 实例四

时间：2014-12-03 19:05:06 阅读：372 评论：0 收藏：0 [点我收藏+]

<!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>

原文：http://www.cnblogs.com/zhaozzm/p/4140678.html

踩

(0)

(1)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)