Slicebox - 3D Image Slider 特效
<!DOCTYPE html><html lang="en">
<head>
<title>Slicebox - 3D Image Slider 实例二丨芯晴网页特效丨CsrCode.CN</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>
<font color=black>▲ 目前IE8及以前版本不兼容CSS3，请使用IE9/火狐/Chrome浏览器运行本效果。 <a href="http://qiannao.com/file/csr04/659b5a30/" target=_blank><b>点此下载本特效：4480.rar</b></a>
<hr><p align="center">本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：妙味课堂</p></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 id="nav-options" class="nav-options">
<span id="navPlay">Play</span>
<span id="navPause">Pause</span>
</div>
</div><!-- /wrapper -->
<p class="info"><strong>实例 2:</strong> Slideshow with play & pause and horizontal slices</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(),
$navOptions = $( '#nav-options' ).hide(),
$shadow = $( '#shadow' ).hide(),
slicebox = $( '#sb-slider' ).slicebox( {
onReady : function() {
$navArrows.show();
$navOptions.show();
$shadow.show();
},
orientation : 'h',
cuboidsCount : 3
} ),
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;
} );
$( '#navPlay' ).on( 'click', function() {
slicebox.play();
return false;
} );
$( '#navPause' ).on( 'click', function() {
slicebox.pause();
return false;
} );
};
return { init : init };
})();
Page.init();
});
</script>
</body>
</html>特效地址：http://www.csrcode.cn/article-3869-1.html
羡慕编程的~~~~~
页:
[1]