银川网站制作建设:如何自定义jQuery滑翔机的设计

银川网站制作建设

jQuery是用于滑块的最流行的JavaScript框架。许多jQuery滑块可以根据用于滑动的技术进行分类。下面是开发人员使用的一些常见的流行技术。

分层滑块-这是最新增加的滑块与视差效应。
淡入/退出滑块-这些类型的滑块没有控制。内容就会一个接一个地消失。
横幅旋转-这些滑块在一个圆形路径中旋转。

还有许多其他类型的技术。每种类型的滑块适合不同的目的和位置在您的网站上。因此，设计师必须仔细选择不同位置的滑块。

即使在我们的个人网站上，我们也创建了大尺寸的滑块来显示产品，滑块用于显示我们的项目组合，小滑块用来在博客上显示有特色的或受欢迎的帖子。因此，我们很有可能在一个网站中包含多个滑块。在下一节中，我将解释为什么多个滑块会给设计人员或开发人员带来真正的痛苦。

Source Files Download

使用多个jQuery滑块的缺点

正如我前面提到的，不同的滑块提供了不同的效果和不同的布局。网页设计师将被提示包括滑块，具有最佳效果的不同地点。在一个网页上使用多个不同的滑块有许多缺点。

每个滑块都有一组脚本和CSS文件。增加脚本和CSS文件的数量将减慢您的站点加载时间，这将影响SEO。
不同的滑块可能需要不同版本的jQuery。因此，jQuery文件将被复制。
在代码中有可能与其他滑块发生冲突。

考虑到以上各点，最好在整个网站中使用一个滑块。可以使用相同的滑块创建不同的设计和功能。您所要做的就是选择一个灵活的滑块，并对jQuery和CSS有一定的了解来定制它。我将在整个教程中使用Rhino Slider，因为它是可用的最灵活的滑块之一。

Rhino Slider简介

犀牛滑雪板是在麻省理工学院或GPL版本2许可证下获得许可的jQuerySlider。您可以在这里下载并获取更多信息。下图显示Rhino Slider的默认视图。

预览图像前的滑块

我已经解释了Rhino Slider组件，以及如何在我的教程中使用它，如何使用RhinoSlider创建多步表单。你可以用它来更好地理解它的工作原理。在本教程中，我将解释如何使用单个滑块创建不同的布局和不同的功能。

滑翔机自定义导航的设计

导航是滑块的一个重要组成部分。尽管可以创建滑块，以便在指定的时间间隔内自动滑行，但最好为用户提供以自己的速度通过滑块的控件。通常，在大多数滑块中都提供了Next和以前的按钮。犀牛滑翔机，我在本教程中使用，包含一个编号的导航类似于分页。

我们可以创建不同的设计，导航相当快，并使滑块看起来完全不同。我将向您展示如何更改导航的基本样式。那就开始吧。

识别控制按钮

Rhino Slider中有3个导航按钮，用于以前的幻灯片、下一个幻灯片和分页。这些组件提供了特定的CSS类，这样我们就可以很容易地识别它们。

前滑翔-犀牛-普雷夫
下一次滑行-犀牛-下一次
分页犀牛子弹

现在，快速查看下面的银川网站制作建设:如何自定义jQuery滑翔机的设计，了解我们将如何改变设计。

带标签的滑块

Demo

步骤1-设计Prev/Next控件

正如您所看到的，prev和Next按钮被赋予不同的图像与原始的黑色背景。此外，控件的位置已经更改，以显示它们在中间而不是底部。因此，让我们讨论对主CSS文件的必要更改。

.rhino-btn {
	background:url(../img/rhinoslider-sprite.png) 0 0 no-repeat;
	z-index:10;
	display:block;
	text-indent:-999%;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;

        /* Modified Styles */
	width:30px;
	height:25px;
}

.rhino-prev, .rhino-next {/* Modified Styles */ bottom:150px; }

.rhino-prev {
         /* Modified Styles */
	 background: url("../img/prev-arrow.png") no-repeat scroll 13px 10px #000000;
         padding: 10px 5px;
         left : -45px;
}

.rhino-next {
        /* Modified Styles */
	background: url("../img/next-arrow.png") no-repeat scroll 15px 10px #000000;
        padding: 10px 5px;
        right:-45px;
}

.rhino-prev:hover { /* Modified Styles */}

.rhino-next:hover { /* Modified Styles */}
.rhino-bullets:before, .rhino-bullets:after {
	position:absolute;
	display:block;
	left:-16px;
	content:' ';
	width:16px;
	height:26px;
	/* Removed Style */
        /* background:url(../img/rhinoslider-sprite.png) -224px 0 no-repeat; */
}
.rhino-bullets {
	position: absolute;
	bottom: -3px;
	margin:0 0 0 -50px;
	z-index: 10;
	background: #fff;
	padding:0;
        /* Modified Styles */
        left: 45%;
}
.rhino-bullets li {
	float:left;
	display:inline;
	/* Modified Styles */
	padding:10px;
	background :#000;
	/*margin:0 2px;*/
}
.rhino-bullets li a.rhino-bullet {
	display: block;
	width: 16px;
	cursor: pointer;
	background: white;
	font-size: 10px;
	text-align: center;
	padding: 6px 0 5px 0;
	color: #333;
	text-decoration:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
        /* Modified Styles */
	background:url("../img/pagination.png") repeat scroll 0 0 #0C1C28;
        height: 3px;
}

.rhino-bullets li a.rhino-bullet:hover, .rhino-bullets li a.rhino-bullet:focus {
	color:#999;
	/* Removed Style */
        /* background:#eee; */
}

.rhino-bullets li a.rhino-bullet.rhino-active-bullet {
	color:#fff;
	/* Removed Style */
        /* background:#5cd4e8;  */
        /* Modified Style */
	background-position:0px -14px;
}

一旦应用了这些样式，滑块就会将其外观更改为图像中提供的设计。我已经提到了为了实现新的设计而改变的风格。现在你可以看到，创造新的设计是多么容易。

滑翔机预览图像的设计

在上一节中，我解释了如何使用导航控件和自定义布局。在本节中，我们将尝试使用一些更高级的代码来显示滑块的预览图像，而不是导航号。在本节中，我们将使用CSS和jQuery的组合。

Demo

因此，我们必须删除用于分页的圆形图像，并增加导航符号的尺寸来显示预览图像。让我们先看一下CSS代码。从原始CSS文件中的所有更改都可以在代码注释中找到。

.rhino-bullets {
	position: absolute;
	bottom: -3px;
	z-index: 10;
	background: #fff;
	padding:0;
        /* Modified Styles */
        bottom: -70px;

        /* Removed Styles
           left: 45%;
	   margin: 0 0 0 -50px;
        */

}

.rhino-bullets li {
	float:left;
	display:inline;
	/* Modified Styles */
	padding:1px;
	background :#000;
	/*margin:0 2px;*/
}
.rhino-bullets li a.rhino-bullet {
	display: block;
	cursor: pointer;
	background: white;
	font-size: 10px;
	text-align: center;
	padding: 6px 0 5px 0;
	color: #333;
	text-decoration:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;

        /* Modified Styles 	*/
        height: 55px;
        width: 102px;
        padding: 0;
        border:5px solid #eee;

        /*  Removed Styles
		background:url("../img/pagination.png") repeat scroll 0 0 #0C1C28;
         */

}
img{
max-width:100%;
}

一旦应用上述CSS代码，银川网站制作建设预览将如下所示。

预览图像后的滑块

让我们使用一些jQuery代码来生成预览图像，而不是符号中的数字。

$('#slider li').each(function(){
	var image_src = $(this).find("img").attr("src");
	var panel_id = $(this).attr("id");

	$('.rhino-bullets li').find("#"+panel_id+"-bullet").html("<img src='"+image_src+"' />");
});

首先，我们使用jQuery每个函数遍历滑块中的所有li元素。
您可能已经注意到，用于滑块图像的li元素的ID为犀牛项目0、犀牛项目1等，而相应的分页子弹为犀角项目0-子弹、犀牛项目1-子弹。
因此，我们使用src属性获得图像src，并获得图像上方li元素的ID。
然后，我们找出不使用ID的相应项目，并将图像分配给预览部分。

现在，您将能够看到预览图像，如下面的屏幕所示。

犀牛滑翔机默认视图

你可以看到改变设计和功能是多么容易。预览像这样的图像不是最优化的方式，因为它缩放图像。但在某些情况下非常有用。

带垂直标签的滑块

让我们看看如何将默认滑块转换为左侧有选项卡式导航的银川网站制作建设滑块。您可以使用下面的屏幕查看本节的最终输出。

滑翔机的自定义导航

Demo

下面是您需要对默认CSS文件进行的必要更改，以便自定义设计。

.rhino-bullets {
    background: none repeat scroll 0 0 #FFFFFF;
    left: -136px;
    margin: 0 0 0 -50px;
    padding: 0;
    position: absolute;
    z-index: 10;

    /* Removed Styles
    bottom: -3px; */

    /* Added Styles */
    top: -3px;
    border:1px solid #A7A5A5;

}

.rhino-bullets:before, .rhino-bullets:after {
    position:absolute;
    display:block;
    left:-16px;
    content:' ';
    width:16px;
    height:26px;

    /* Removed Styles
    background:url(../img/rhinoslider-sprite.png) -224px 0 no-repeat;
    */
}
.rhino-bullets li {
    margin: 0 2px;

    /* Modified Styles */
    display: block;
    border-bottom: 1px solid #eee;

    /* Removed Styles
    float: left;*/
}

.rhino-bullets li a.rhino-bullet {
    -moz-user-select: none;
    background: none repeat scroll 0 0 white;
    color: #333333;
    cursor: pointer;
    display: block;
    font-size: 10px;

    text-align: center;
    text-decoration: none;

    /* Modified Styles */
    height: 50px;
    padding: 5px;
    width: 170px;

}
.rhino-bullets li img{
    width:75px;
    height: 50px;
    float: left;
}

.rhino-bullets li p{
    font-family: helvetica;
    font-size: 12px;
    font-weight: bold;
}

除了缩略图，我们还可以在标题前面添加一个简短的标题或标题。您必须在JavaScript数组中定义标题，如下面的代码所示。

var info = ["Image Tagging","Rhino Slider","Tweet Book","Reward Tweet","Sliding Menu"];

                $('#slider li').each(function(index){
                    var image_src = $(this).find("img").attr("src");
                    var panel_id = $(this).attr("id");

                $('.rhino-bullets li').find("#"+panel_id+"-bullet").html("<img src='"+image_src+"' /><p>"+info[index]+"</p>");
});

我在遍历分页符号时使用JavaScript数组添加了标题。

如何使用单页设计

在前面的3节中，我向您展示了如何使用相同的滑块创建不同的设计和功能。我们更改了Rhino Slider的主CS银川网站制作建设S文件，但是当我们在一个页面中使用多个滑块时，我们不能像刚才那样改变样式。因此，我们必须找到替代方法来为相同的类和元素指定不同的样式。

Demo

首先，我们必须为滑块容器提供不同的ID，如下所示，并分别初始化RhinoSlider。

<ul id="slider1" class="slider">
                <li><img src="img/slider/1.jpg" /></li>
                <li><img src="img/slider/2.jpg" /></li>
                <li><img src="img/slider/3.jpg" /></li>
                <li><img src="img/slider/4.jpg" /></li>
                <li><img src="img/slider/5.jpg" /></li>
            </ul>

            <ul id="slider2" class="slider">

                <li><img src="img/slider/4.jpg" /></li>
                <li><img src="img/slider/5.jpg" /></li>
                <li><img src="img/slider/1.jpg" /></li>
                <li><img src="img/slider/2.jpg" /></li>
                <li><img src="img/slider/3.jpg" /></li>
            </ul>

然后，我们必须为每个滑块容器的项目导航列表分配一个唯一的类。下面的jQuery代码将该类添加到导航符号中。

$('#slider1').parent().addClass("slider1");
$('#slider2').parent().addClass("slider2");

每个设计都有自己的风格。因此，在所有修改的样式前面加上相对于滑块的类。考虑下面的例子。

.slider1 .rhino-bullets {
	position: absolute;
	bottom: -3px;
	z-index: 10;
	background: #fff;
	padding:0;
        /* Modified Styles */
        bottom: -70px;

        /* Removed Styles
           left: 45%;
	   margin: 0 0 0 -50px;
        */
}
.slider2 .rhino-bullets {
	position: absolute;
	bottom: -3px;
	margin:0 0 0 -50px;
	z-index: 10;
	background: #fff;
	padding:0;
        /* Modified Styles */
        left: 45%;
}

在上面的例子中，两个滑块对于犀牛子弹类有不同的样式。所以用滑块类作为前缀。对于并非所有滑块都常见的其他样式，请遵循相同的处银川网站制作建设理过程。

因此，我们已经创建了一些滑块设计和学习如何定制一个滑块。是时候为滑块创建自己的定制设计了。欢迎大家分享链接或银川网站制作建设:如何自定义jQuery滑翔机的设计到您的定制版本的犀牛滑雪板。

银川网站制作建设:如何自定义jQuery滑翔机的设计

Source Files Download

使用多个jQuery滑块的缺点

Rhino Slider简介

滑翔机自定义导航的设计

识别控制按钮

Demo

滑翔机预览图像的设计

Demo

带垂直标签的滑块

Demo

如何使用单页设计

Demo

银川网站建热门新闻

银川网站制作公司：如何从头创建一个属于自己的网站

银川高端网站建设:怎么建立制作一个好的营销工具

随机推荐

灵武网站建设服务:使用css和jQuery创建光滑的滑动框

银川定制网站建设:跨越悲痛的五个阶段迁移网站所有者

兴庆网站建设服务:Facebook喜欢推特粉丝真的很重要吗？

吴忠高端网站设计：10个最简单的数字下载插件来升级你的商店

新闻类别

银川网站制作建设:如何自定义jQuery滑翔机的设计

Source Files Download

使用多个jQuery滑块的缺点

Rhino Slider简介

滑翔机自定义导航的设计

识别控制按钮

Demo

滑翔机预览图像的设计

Demo

带垂直标签的滑块

Demo

如何使用单页设计

Demo

分享至:

银川网站建热门新闻

银川网站制作公司：如何从头创建一个属于自己的网站

银川高端网站建设:怎么建立制作一个好的营销工具

随机推荐

灵武网站建设服务:使用css和jQuery创建光滑的滑动框

银川定制网站建设:跨越悲痛的五个阶段迁移网站所有者

兴庆网站建设服务:Facebook喜欢推特粉丝真的很重要吗？

吴忠高端网站设计：10个最简单的数字下载插件来升级你的商店

新闻类别