nivo slider_通过Nivo为Orman的图像滑块控件提供动力

最新推荐文章于 2024-08-22 09:54:10 发布

翻译最新推荐文章于 2024-08-22 09:54:10 发布 · 291 阅读

文章标签：

#js #html #css #jquery #脚本语言 #ViewUI

本文详细介绍如何使用NivoSlider插件创建一个功能完善的图像滑块，包括文件夹结构创建、HTML5基本标记设置、全局样式定义、滑块结构搭建、滑块居中技巧、插件下载与链接、插件连接与参数定义、字幕样式设置以及最后的导航按钮添加。

nivo slider

在“ 高级像素”会议中，接下来是Orman的“ 图像滑块控件” 。我们将使用PSD，为浏览器重建它，然后使用出色的Nivo Slider jQuery插件使整个功能正常运行。

步骤1：创建我们的文件夹结构

为了使所有内容保持整洁，我们首先创建文件夹结构。继续并分别创建三个名为“ css”，“ images”和“ js”的文件夹。 css文件夹将包含我们的样式表。图片是用于图像，而js将包含我们的jQuery插件-在这种情况下为Nivo滑块！

步骤2： HTML5基本标记

好的，我们有了文件夹结构，现在我们需要创建html文档。在您的项目的根目录中创建它。我们将使用一个简单HTML5基本模板，同时还链接到Google托管的jQuery库。

<!DOCTYPE html>
<html>
<head>

	<!--Meta tags-->
	<meta charset="utf-8">

	<!--Title-->
	<title>Image Slider Controls</title>
		
	<!--Stylesheets-->
	<link rel="stylesheet" href="css/styles.css">

</head>
<body>





	<!--jQuery-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


</body>
</html>

步骤3：创建一些全局样式

我们将以一些重置样式开始：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	text-decoration:none;
}

现在，在进入滑块本身之前，我们将为页面添加背景。如果您已经下载了PSD，则将看到一个带有放射状渐变的层，暗示了一些微妙的灯光。我们将通过具有可重复的图案（比PSD轻一点）来创建此图案。应用背景后，我们将在html标签上使用一些插入框阴影来尝试在中心复制光线。

html {
	-webkit-box-shadow:
		inset 250px 250px 250px rgba(0,0,0,.25),
		inset -250px -250px 250px rgba(0,0,0,.25);
	-moz-box-shadow:
		inset 250px 250px 250px rgba(0,0,0,.25),
		inset -250px -250px 250px rgba(0,0,0,.25);
	box-shadow:
		inset 250px 250px 250px rgba(0,0,0,.25),
		inset -250px -250px 250px rgba(0,0,0,.25);

	width:100%;
	height:100%;
}

body {
	background:url(../images/bg.jpg) repeat;

	font-size:100%;
}

步骤4：滑块结构

现在，我们终于可以启动滑块了！ Nivo Slider是Gilbert Pellegrom和Michael Wright的作品，与Orman一起被称为Dev7studios和专业密友。

它使我们可以使用尽可能少的标记来创建滑块。我们需要做的就是创建一个ID为您喜欢的div；在这种情况下，我将使用“ slider”和“ nivoSlider”类。然后，您需要做的就是将图像放在div内！

<!DOCTYPE html>
<html>
<head>

	<!--Meta tags-->
	<meta charset="utf-8">

	<!--Title-->
	<title>Image Slider Controls</title>
		
	<!--Stylesheets-->
	<link rel="stylesheet" href="css/styles.css">

</head>
<body>


<div id="slider" class="nivoSlider">
	<img src="images/image1.jpg" alt="Slider Image 1" title="Fauna Friends Japanimals Posters">
	<img src="images/image2.jpg" alt="Slider Image 2" title="AIGA SOF Letterpress Cards"> <!--image courtesy of http://www.beastpieces.com/-->
</div>


	<!--jQuery-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</body>
</html>

步骤5：将滑块居中

接下来，我们将滑块放在页面中间，如果您按照我的上一个教程进行操作，则将完成如何实现此操作的过程。如果您需要更多信息，请参阅CSS Tricks上的这篇文章。

我们还继续，并在记住浏览器前缀的同时向滑块添加了一些阴影。注意，我们还添加了一些其他CSS，这对于nivoSlider来说是必需的。

#slider {
	position:absolute !important;
	top:50%;
	left:50%;

	width:650px;
    height:350px;

    margin-top:-175px;
    margin-left:-325px;

	-webkit-box-shadow:
		0px 0px 5px rgba(0,0,0,.5),
		0px 0px 20px rgba(0,0,0,.2);
	-moz-box-shadow:
		0px 0px 5px rgba(0,0,0,.5),
		0px 0px 20px rgba(0,0,0,.2);
	box-shadow:
		0px 0px 5px rgba(0,0,0,.5),
		0px 0px 20px rgba(0,0,0,.2);
}

.nivoSlider img {
    position:absolute;
    top:0;
    left:0;
    display:none;
}
.nivoSlider a {
    border:0;
    display:block;
}

.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
}

步骤6：下载Nivo

是时候集成Nivo Slider了。首先前往http://nivo.dev7studios.com/pricing/并下载jQuery插件。下载并解压缩后，将jquery.nivo.slider.js文件复制到步骤1中创建的js文件夹中。

接下来，我们需要在html文档中链接到该文件。

<!DOCTYPE html>
<html>
<head>

	<!--Meta tags-->
	<meta charset="utf-8">

	<!--Title-->
	<title>Image Slider Controls</title>
		
	<!--Stylesheets-->
	<link rel="stylesheet" href="css/styles.css">

</head>
<body>


<div id="slider" class="nivoSlider">
	<img src="images/image1.jpg" alt="Slider Image 1" title="Fauna Friends Japanimals Posters">
	<img src="images/image2.jpg" alt="Slider Image 2" title="AIGA SOF Letterpress Cards">
</div>

	<!--jQuery-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="js/jquery.nivo.slider.js"></script>

</body>
</html>

第7步：连接插件

现在，我们已下载并链接了插件，我们需要将其连接到滑块，同时定义一些可选参数。有关所有可用选项的详细信息，请参阅Nivo文档。

<!--jQuery-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="js/jquery.nivo.slider.js"></script>

	<script type="text/javascript">
		$(window).load(function() {
		    $('.nivoSlider').nivoSlider({
		    	effect: 'sliceDown',
		    	directionNavHide: false,
		    	captionOpacity: 1,
		    	controlNav: false
		    });
		});
	</script>

</body>
</html>

步骤8： DAT字幕在哪里？

我们已经完成了滑块！但是等等，字幕呢？ Nivoslider从图像的标题标签创建标题，然后应用ID /类，以便我们根据需要设置样式！我们将使用CSS3渐变创建标题的背景。请注意，我们还将字幕背景用作Control Nav背景，这是创建字幕的一种很合乎逻辑的方法。

<img src="images/image1.jpg" alt="Slider Image 1" title="Fauna Friends Japanimals Posters">
	<img src="images/image2.jpg" alt="Slider Image 2" title="AIGA SOF Letterpress Cards">

.nivo-caption {
	position:absolute;
	left:75px;
	bottom:29px;
	
	width:498px;
	padding-top:13px;
	padding-bottom:13px;

	z-index:8;

	border:1px solid #000;
	border-left-color:rgba(0,0,0,.5);
	border-right-color:rgba(0,0,0,.5);

	-webkit-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.15),
		0px 1px 3px rgba(0,0,0,.7);
	-moz-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.15),
		0px 1px 3px rgba(0,0,0,.7);
	box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.15),
		0px 1px 3px rgba(0,0,0,.7);

	background: -webkit-linear-gradient(top,  rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
	background: -moz-linear-gradient(top,  rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
	background: -o-linear-gradient(top,  rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
	background: -ms-linear-gradient(top,  rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
	background: linear-gradient(top,  rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 );

	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}


.nivo-caption p {
	margin:0;

	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#fff;
	text-align:center;
	text-shadow:0px -1px 0px #000;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}

步骤9：完成

我们即将完成，我们只需要添加“下一个”和“上一个”按钮即可。在此之前，我们尽可能地使用CSS，但是现在我们将使用具有透明背景的图像来创建这些箭头。

.nivo-directionNav a {
	position:absolute;
	bottom:30px;
	z-index:9;
	cursor:pointer;
	text-indent:-9999px;

	width:45px;
	height:39px;

	background-image:url(../images/arrows.png);
	background-repeat:no-repeat;
}
.nivo-prevNav {
	left:75px;
	background-position:0 0;

	box-shadow:
		1px 0px 0px rgba(255,255,255,.2),
		2px 0px 0px rgba(0,0,0,.4);
}
.nivo-nextNav {
	right:77px;
	background-position:-45px 0px;

	box-shadow:
		-1px 0px 0px rgba(255,255,255,.2),
		-2px 0px 0px rgba(0,0,0,.4);
}

结论

好吧，我们已经做到了！我们采用了Orman的另一种设计并进行了编码，这次使用了出色的Nivo Slider！

考虑到跨浏览器的友好性，我继续进行了测试，并在IE7及更高版本中进行了测试。除了字幕分隔符（使用阴影框创建）之外，根本没有任何问题。如果您对更广泛的浏览器支持感兴趣，请查看有关解决旧版浏览器中CSS3头痛的文章。

希望您喜欢本教程，感谢您的阅读！

翻译自: https://webdesign.tutsplus.com/articles/powering-ormans-image-slider-controls-with-nivo--webdesign-6646

nivo slider