2016/1/28 codes(slicebox-3d 图片切换index1.html)
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2016/1/28 codes(slicebox-3d 图片切换index1.html)相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Slicebox-3d 图片切换立体效果</title>
<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="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" href="http://dreamsky.github.io/main/blog/common/init.css">
</head>
<body>
<div class="container">
<h1>Slicebox-3d 图片切换立体效果</h1>
<div class="more">
<ul id = "sb-examples">
<li class="selected"><a href="index1.html">效果一</a></li>
<li><a href="index2.html">效果二</a></li>
<li><a href="index3.html">效果三</a></li>
<li><a href="index4.html">效果四</a></li>
</ul>
</div>
<div class="wrapper">
<ul id = "sb-slider" class="sb-slider">
<li>
<a href="http://www.cnblogs.com/1hb25" target="_blank"><img src = "images/1.jpg" alt="image1"></a>
<div class="sb-description">
<h3>Creative Lifesaver</h3>
</div>
</li>
<li>
<a href="http://www.cnblogs.com/1hb25" target="_blank"><img src="images/2.jpg" alt="image2"></a>
<div class="sb-description">
<h3>Honest Entertainer</h3>
</div>
</li>
<li>
<a href="http://www.cnblogs.com/1hb25" target="_blank"><img src="images/3.jpg" alt="image1"></a>
<div class="sb-description">
<h3>Brave Astronaut</h3>
</div>
</li>
<li>
<a href="http://www.cnblogs.com/1hb25" target="_blank"><img src="images/4.jpg" alt="image1"></a>
<div class="sb-description">
<h3>Affectionate Decision Maker</h3>
</div>
</li>
<li>
<a href="http://www.cnblogs.com/1hb25" target="_blank"><img src="images/5.jpg" alt="image1"></a>
<div class="sb-description">
<h3>Faithful Investor</h3>
</div>
</li>
<li>
<a href="http://www.cnblogs.com/1hb25" target="_blank"><img src="images/6.jpg" alt="image1"></a>
<div class="sb-description">
<h3>Groundbreaking Artist</h3>
</div>
</li>
<li>
<a href="http://www.cnblogs.com/1hb25" target="_blank"><img src="images/7.jpg" alt="image1"></a>
<div class="sb-description">
<h3>Selfless Philantropist</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-dots" class="nav-dots">
<span class="nav-dot-current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id = "footer-banner" style="width: 728px;margin: 30px auto"></div>
</div>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slicebox.js"></script>
<script type="text/javascript">
$(function(){
var page = function(){
var $navArrows = $(‘#nav-arrows‘).hide(),
$navDots = $(‘#nav-dots‘).hide(),
$nav = $navDots.children(‘span‘),
$shadow = $(‘#shadow‘).hide(),
slicebox = $(‘#sb-slider‘).slicebox({
onReady : function(){
$navArrows.show();
$navDots.show();
$shadow.show();
},
onBeforeChange : function(pos){
$nav.removeClass(‘nav-dot-current‘);
$nav.eq(pos).addClass(‘nav-dot-current‘);
}
}),
init = function(){
initEvents();
},
initEvents = function(){
$navArrows.children(‘:first‘).on(
‘click‘,function(){
slicebox.next();
return false;
}
);
$navArrows.children(‘:last‘).on(‘click‘,function(){
slicebox.previos();
return false;
});
$nav.each(function(i){
$(this).on(‘click‘,function(event){
var $dots = var $(this);
if(!slicebox.isActive()){
$nav.removeClass(‘nav-dot-current‘);
$dot.addClass(‘nav-dot-current‘);
}
slicebox.jump(i + 1);
return false;
})
});
},
return{init:init};
}();
page.init();
})
</script>
<script src="http://dreamsky.github.io/main/blog/common/init.js"></script>
</body>
</html>
以上是关于2016/1/28 codes(slicebox-3d 图片切换index1.html)的主要内容，如果未能解决你的问题，请参考以下文章
2016/1/29 jquery.slicebox.js(上部分)