标签：function 轮播 酷炫 slicebox 1px nav background shadow 255
效果演示： 文末获取源码
代码目录：
主要代码实现：
CSS样式：
.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(255, 255, 255, 0.6), inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 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;
}
HTML代码 :
<!DOCTYPE html PUBLIC "-//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, initial-scale=1.0">
<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>
上面的图片和JS以及CSS文件需要引入
标签：function,轮播,酷炫,slicebox,1px,nav,background,shadow,255 来源： https://www.cnblogs.com/laoyuming/p/15249367.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。