Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>slicebox-3d Picture Toggle Stereoscopic Effect </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, au Tomatic "/>
<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" >
<body>
<div class= "Container" >
<div class= "More" >
<ul id = "Sb-examples" >
<li class= "selected" ><a href= "index1.html" > Effect one </a></li>
<li><a href= "index2.html" > Effects two </a></li>
<li><a href= "index3.html" > Effects three </a></li>
<li><a href= "index4.html" > Effects four </a></li>
</ul>
</div>
<div class= "wrapper" >
<ul id = "Sb-slider" class= "Sb-slider" >
<li>
<a href= "http://www.cnblogs.com/1hb25" target= "_blank" ></a>
<div class= "Sb-description" >
</div>
</li>
<li>
<a href= "http://www.cnblogs.com/1hb25" target= "_blank" ></a>
<div class= "Sb-description" >
</div>
</li>
<li>
<a href= "http://www.cnblogs.com/1hb25" target= "_blank" ></a>
<div class= "Sb-description" >
</div>
</li>
<li>
<a href= "http://www.cnblogs.com/1hb25" target= "_blank" ></a>
<div class= "Sb-description" >
</div>
</li>
<li>
<a href= "http://www.cnblogs.com/1hb25" target= "_blank" ></a>
<div class= "Sb-description" >
</div>
</li>
<li>
<a href= "http://www.cnblogs.com/1hb25" target= "_blank" ></a>
<div class= "Sb-description" >
</div>
</li>
<li>
<a href= "http://www.cnblogs.com/1hb25" target= "_blank" ></a>
<div class= "Sb-description" >
</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>
2016/1/28 codes (slicebox-3d picture toggle index1.html)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
