🍅 welcome to like 👍 collect ⭐ message 📝

Effect demonstration: the end of the source code

​

Code directory:

​

Main code implementation:

CSS styles:

.shadow { width: 100%; height: 168px; position: relative; margin-top: -110px; background: transparent url(.. /images/shadow.png) no-repeat bottom center; background-size: 100% 100%; /* stretches it */ z-index: -1; display: none; } .sb-description h3 { font-size: 20px; Text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); } .sb-description h3 a { color: #4a3c27; Text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); } .nav-arrows { display: none; } .nav-arrows a { width: 42px; height: 42px; background: #cbbfae url(.. /images/nav.png) no-repeat top left; position: absolute; top: 50%; left: 2px; text-indent: -9000px; cursor: pointer; margin-top: -21px; Opacity: 0.9; border-radius: 50%; Box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8); } .nav-arrows a:first-child { left: auto; right: 2px; background-position: top right; } .nav-arrows a:hover { opacity: 1; } .nav-dots { text-align: center; position: absolute; bottom: -5px; height: 30px; width: 100%; left: 0; display: none; } .nav-dots span { display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin: 3px; background: #cbbfae; cursor: pointer; Box-shadow: 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 1px 1px rgba(0, 0, 0, 0.1); } .nav-dots span.nav-dot-current { box-shadow: 0 1px 1px rgba(0, 0, 255, 255, 0.6), inset 0 0 0 0 3px #cbbfae, inset 0 0 0 8px # FFF; } .nav-options { width: 70px; height: 30px; position: absolute; right: 70px; bottom: 0px; display: none; } .nav-options span { width: 30px; height: 30px; background: #cbbfae url(.. /images/options.png) no-repeat top left; text-indent: -9000px; cursor: pointer; Opacity: 0.7; display: inline-block; border-radius: 50%; } .nav-options span:first-child { background-position: -30px 0px; margin-right: 3px; } .nav-options span:hover { opacity: 1; }Copy the code

HTML code:

<! PUBLIC DOCTYPE HTML "- / / / / W3C DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Slicebox - 3D Image Slider</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, <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" /> <script type="text/javascript" src="js/modernizr.custom.46884.js"></script> </head> <body> <div  class="more"> <ul id="sb-examples"> <li>More examples:</li> <li class="selected"><a href="index.html">Example 1</a></li> <li><a href="index2.html">Example 2</a></li> <li><a href="index3.html">Example 3</a></li> <li><a href="index4.html">Example 4</a></li> </ul> </div> <div class="wrapper"> <ul id="sb-slider" class="sb-slider"> <li> <a href="http://www.17sucai.com/" 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.17sucai.com/" 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.17sucai.com/" 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.17sucai.com/" 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.17sucai.com/" 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.17sucai.com/" 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.17sucai.com/" 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> <! -- /wrapper --> <script type="text/javascript" src="js/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() { // add navigation events $navArrows.children(':first').on('click', function() { slicebox.next(); return false; }); $navArrows.children(':last').on('click', function() { slicebox.previous(); return false; }); $nav.each(function(i) { $(this).on('click', function(event) { var $dot = $(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> </body> </html>Copy the code

The above images and JS and CSS files need to be introduced

The source code for

You can like, favorites, follow, comment on me, check the main page of the blogger to get ~!

Clocked articles updated 44/100 days

​