本文共 17089 字,大约阅读时间需要 56 分钟。
jquery slider
This Article is in continuation with the tutorial on “” in “Sliders” series. This will cover following topics in order:-
本文是“ 滑块 ”系列中“ ”教程的续篇。 这将按顺序涵盖以下主题:
As we’ve already seen that Photo Sliders can effectively showcase the images on a limited space of a webpage. But sometime we are needed to display images having some information linked to it. For E.g., textual information, hyperlink to some other page, buttons, other embedded images etc.
正如我们已经看到的,Photo Sliders可以在网页的有限空间中有效展示图像。 但是有时候我们需要显示链接了一些信息的图像。 例如,文本信息,到其他页面的超链接,按钮,其他嵌入式图像等。
In a Content Slider, each of the slides is a DIV container element, instead of a block element like IMG. So you can add as many child element in it. The only restriction is that your contents should be within the limit of slides actual area.
在内容滑块中 ,每个幻灯片都是DIV容器元素,而不是IMG之类的块元素。 因此,您可以在其中添加尽可能多的子元素。 唯一的限制是您的内容应在幻灯片实际区域的范围内。
Paginations are way of indexing a list with numerals, where each index corresponds to a particular slide. One possible application of Pagination in any slider is the accessibility. At any point, you can directly navigate to a particular slide. They help in sequencing any ordered slider. Users can be guided through your slides using this sequencing mechanism.
分页是用数字索引列表的方式,其中每个索引对应于特定的幻灯片。 分页在任何滑块中的一种可能应用是可访问性。 您随时可以直接导航到特定幻灯片。 它们有助于对任何有序滑块进行排序。 使用这种排序机制,可以指导用户浏览幻灯片。
This article assumes readers have basic knowledge about what is a webpage, HTML basic tags, few CSS properties and know-how of JavaScript. You can refer to the website for these topics. To know more about basic jQuery functions, you can go through other jQuery tutorials posted here. Those who are familiar with these stuffs can directly start with the Implementing Content Sliders section.
本文假定读者具有有关什么是网页的基本知识,HTML基本标签,很少CSS属性以及JavaScript的专门知识。 您可以访问网站上的这些主题。 要了解有关jQuery基本功能的更多信息,您可以阅读此处发布的其他jQuery教程。 那些熟悉这些内容的人可以直接从“实施内容滑块”部分开始。
Now with some basic background of HTML, CSS and JavaScript, we can proceed with the content slider implementation. Just follow the following guidelines;
现在有了HTML,CSS和JavaScript的一些基本背景,我们可以继续执行内容滑块。 只需遵循以下准则;
The layout of the slider is as shown in the below figure. Those who have followed the Last tutorial on would see some changes done in the layout of the slider. Actually we’ve added one more parent container element (Class: gallery-container) which encloses the Slider and the Pagination into a single Parent Container.
For you easiness, I’ve made the layout and pointed the different containers with colors. The dotted line border for “slider-nav” class denotes that only buttons within “slider-nav” are made visible over slides and not the “slider-nav” container.
NOTE: You can Google Chrome’s default code viewer by pressing [F12] and choosing “Elements” tab. Then hover over each element in the code to see how web page elements are highlighted.
创建内容滑块的布局滑块的布局如下图所示 。 那些遵循了的上一教程的人会看到滑块布局发生了一些变化。 实际上,我们又添加了一个父容器元素( Class:gallery-container ),该元素将Slider和Pagination封装在一个父容器中。
为了方便起见,我进行了布局并用颜色指定了不同的容器。 “ slider-nav”类的虚线边框表示仅“ slider-nav”内的按钮在幻灯片上可见,而“ slider-nav ”容器不可见。
注意 :您可以通过按[F12]并选择“ 元素 ”标签来使用Google Chrome的默认代码查看器。 然后将鼠标悬停在代码中的每个元素上,以查看如何突出显示网页元素。
slider()
method accepts three parameters and extracts some information like no. of images in the list and width of the image. It also fills the pagination container dynamically by computing the total number of slides in the UL list. For this html() jQuery method is used.slider()
方法接受三个参数并提取一些信息,例如no。 图片列表和图片宽度中的图片。 它还通过计算UL列表中的幻灯片总数动态填充分页容器。 为此,使用html() jQuery方法。 If you have understood the layout of the slider, let’s understand a trick. One of the problem we face with these content sliders is “Long string sentences” which mostly tend to overflow the slide region. To solve this problem, we’ll be using a CSS property “word-wrap” and set its value as ‘break-word’ which makes it sure that long string words will be broken if they overflow the dedicated width and will be continued on next line.
The ContentSlider.html
file has structural elements along with scripts related to creation of the object for our slider. Observe how each of the slide content is enlisted as the unordered list elements. Two files contentStyle.css
and contentSliderScript.js
contain styles and methods for controlling the slider motion, direction and also creating dynamic pagination list. You would also need reference to JQuery Library i.e. which you can download and save in the ‘scripts’ folder.
Codes for all these files are shown below.
jQuery Content Slider HTML Code
ContentSlider.html
Content Slider Content Slider
CSS Code for Content Slider
contentStyle.css
JavaScript Code for Content Slider
contentSliderScript.js
/*This method will initialize each slider instance.Parameter are: -------------------1) container -> div.slider ul2) pagicontainer -> div.pagi-container ul3) nav -> #slider-nav*/function slider(container, pagicontainer, nav){ this.container=container; this.pagicontainer=pagicontainer; this.nav=nav.hide(); // This will assign 'nav' from parameters to 'nav' of current slider instance. It uses method chaining. this.imgs=this.container.find('.slides'); // Returns jQuery object containing all matched elements. // Following commented line will not work here, as DIVs are Dynamic by nature unlike images where dimensions are known at "PageLoad( )" event. // this.width=this.imgs[0].width; this.width=640; // Only add contents within this limit. Longer sentences will be continued on next Line. console.log('Value of width is : '+this.width); this.imgLen=this.imgs.length; // Returns the total number of sliding elements. console.log("Total no. of Items in the list are : "+this.imgLen); // Here we will fill the Pagination with the following list. out = ""; cnt=0; this.liArr = $(container).find('li');// Returns jQuery object containing all matched LI elements. this.liArr.each(function() { out += "
The source codes have comments wherever it is needed. In case of specific doubt you can ask me directly by commenting below.
内容滑块的实现(代码)如果您了解滑块的布局,让我们了解一个技巧。 这些内容滑块面临的问题之一是“长字符串句子”,该字符串通常会溢出滑块区域。 为了解决这个问题,我们将使用CSS属性“ word-wrap”,并将其值设置为“ break-word”,这可以确保长字符串单词如果超出了专用宽度将被打破,并且将继续下一行。
ContentSlider.html
文件具有结构元素以及与为滑块创建对象有关的脚本。 观察每个幻灯片内容如何被列为无序列表元素。 两个文件contentStyle.css
和contentSliderScript.js
包含用于控制滑块运动,方向以及创建动态分页列表的样式和方法。 您还需要引用JQuery库,即 ,您可以下载并保存在“ scripts”文件夹中。
所有这些文件的代码如下所示。
jQuery Content Slider HTML代码
ContentSlider.html
内容滑块CSS代码
contentStyle.css
*{ margin:0; padding:0;}/* ============================== This is for Overall Styling of the Content Gallery. */.gallery-container{ border:2px solid olive; margin:10px auto; padding:0px; display:table;}.gallery{ width:640px; height:370px; background:#999; /*border:2px solid green;*/}.slider{ overflow:scroll;}.slider ul{ width:100000px; list-style:none; margin-left:0px;}.slider li{ float:left;}/* ============================== This is for Navigation Buttons Styling. */.slider-nav{ display:none; /* This is important to hide the buttons if jQuery is Not supported. */ margin-top: -10em; cursor: pointer; }.backbtn{ position:relative;}.nextbtn{ position:relative;}/* ============================== This is for Pagination Styling. */.slider-pagi{ /*border:2px solid red;*/ text-align:center; /* Important : Keeps the Pagination in the center. */ width:640px;}.pagi-container{ /*border: 2px solid cyan;*/ padding: 5px; display: inline-block; /* This is a good alternative for inline-flex and supports most of the browsers. */ /* display: inline-flex; */ /* This is important to remove the extra vertical spaces between 'UL' and 'pagi-container' */}.pagi-container > ul{ padding:2px; /*border:1px solid black;*/ display: inline-block; text-align: center;}.pagi-container > ul li{ /* float:left; */ /* Instead write "display:inline-block" Property to set the pagi-elements in center. */ list-style:none; padding:0px; /* Setting padding as zero will increase clickable region of child('a' Anchor Element) of LI element */ border:1px solid grey; margin: 0px auto; display:inline-block; background: radial-gradient(rgba(255, 255, 255, 0.8) 50%, rgba(180,180,180,0.8)); }.pagi-container > ul li:hover{ background: radial-gradient(rgba(220, 220, 220, 0.3), rgba(180,180,180,0.8) 95%);}.pagi-container > ul li a{ display:inline-block; padding:5px; /* This is important to Increase the Clickable Region of the anchor Elements */ text-decoration:none; color:rgb(100,100,100);}/* ============================== This is for Styling Each of the Content Slides */.slides{ width:640px; /* This width is reduced to compensate the padding on left and right */ height:345px; /* This height is reduced to compensate the padding on top and bottom */ word-wrap:break-word; /* Avoids the Text Overflow, and breaks the long Strings/ Sentences on next line. */ background-color:rgb(198,185,221); }.slides_content{ position:relative; /* Keeps the Slides Content Relative to each Slide */ width:100%; height:100%;}h3{ position:absolute; width:100%; top:50px; }h3 span.slides_texts{ color: white; padding:10px; letter-spacing: 1px; background: rgba(0, 0, 0, 0.5); line-height:42px; }h3 span.slides_heading{ color: white; display:table; margin:0px auto; background: rgba(0, 0, 0, 0.5); padding:10px;}h3 div.text_container{ margin:10px;}.bg_img{ width: 100%; height: 100%;}
内容滑块JavaScript代码
contentSliderScript.js
源代码在任何需要的地方都有注释。 如果有特殊疑问,您可以通过以下评论直接问我。
NOTE: If you are using Chrome browser and want to debug your scripts, you can Press [F12] key and click on ‘Console’ tab to see how ‘current’ counter is changing on click of a button.
注意 :如果您使用的是Chrome浏览器并且要调试脚本,则可以按[F12]键并单击“控制台”选项卡,单击按钮即可查看“当前”计数器的变化情况。
You can see this slider in action by visiting below demo page.
您可以通过访问下面的演示页面来查看此滑块的运行情况。
Hope you’ve learnt something new and interesting. Get ready for the next article on “Image Sliders with thumbnail view of images” with pagination, vertical sliding and other effects. Happy learning!
希望您学到了一些有趣的新东西。 准备好下一篇关于“ 具有图像缩略图的图像滑块 ”的文章, 其中包括分页,垂直滑动和其他效果。 学习愉快!
NOTE: This article is submitted by Prakash Upadhyay. You can find him on .
注意:本文由Prakash Upadhyay提交。 您可以在找到他。
翻译自:
jquery slider
转载地址:http://pfqzd.baihongyu.com/