使用jQuery创建一个流畅的和可访问的幻灯片

<！——Slideshow HTML——> 
 < div id = "slidesContainer" > < div class = "幻灯片" > < !——幻灯片1的内容到这里——> 
 
 < !幻灯片2的内容在这里。——> 
 
 < !幻灯片3的内容在这里。——> 
 
 < !幻灯片4的内容在这里。
——> 
 

在下面的例子1中，您将看到基于文本的浏览器和无法呈现CSS和JavaScript的浏览器将如何看到我们的幻灯片。需要注意的是，我们所有的内容都很容易访问;我们没有对用户隐藏任何东西——确保每个人都有能力查看我们的内容。左右箭头控件也没有标记，稍后我们将使用JavaScript将它们插入到DOM中。

对于没有CSS或JavaScript功能的人来说，将它们放在内容结构级别会让人感到困惑。示例1:幻灯片的HTML内容结构提示：首先要经常测试网页的可访问性．在处理任何新内容时，都应该测试HTML结构的可访问性。

您可以使用名为WebAnywhere的免费web应用程序进行屏幕阅读器web可访问性测试，以模拟使用屏幕阅读器的用户将如何与您的内容进行交互。

样式的幻灯片

强大设计的下一步是拥有一组良好的样式，考虑用户禁用JavaScript的可能性。为# slidesContainer,我们设置了溢出财产汽车因此，当内容溢出到设置的高度时，滚动条就会出现263 px(幻灯片的高度)。

第二块:# slidesContainerCSS

#slideshow #slidesContainer {margin:0 auto;宽度:560 px;身高:263 px;溢出:汽车;/*允许滚动条*/位置:相对;｝

我们必须缩小宽度.slidediv类20 px以适应关闭JavaScript时出现的右手滚动条。

块3:.slide类的CSS

#slideshow #slidesContainer .slide {margin:0 auto;宽度:540 px;/*减少20像素以避免水平滚动*/身高:263 px;｝

没有JavaScript，我们的内容仍然可以访问;用户可以上下滚动查看我们的幻灯片。就像做一个网站页面，我们希望我们的内容使用起来尽可能方便。示例2作为替代，你可以给.slide样式规则浮:左;属性，使用户可以水平滚动而不是垂直滚动。

左右箭头CSS

为了节省一些JavaScript呈现资源，我们将声明将通过jQuery插入DOM中的左控件和箭头控件的样式规则。元素将会是< span >元素，因此声明a光标属性并将其赋值指针当用户悬停在控件上时，更改鼠标指针。我们使用文本属性将文本隐藏在视线之外，一种CSS背景图像替换方法。

块4:控制

/** *幻灯片控制样式规则。*/ .control{显示:块;宽度:39 px;身高:263 px;文本:-10000 px;位置:绝对的;光标:指针;} #leftControl {top:0;左:0;背景:透明url(img/control_left.jpg) no-repeat 0 0;} #rightControl {top:0;右:0;背景:透明url(img/control_right.jpg) no-repeat 0 0;｝

最好的部分…JavaScript

有了HTML和CSS之后，是时候做一些有趣的事情了。我们将使用jQuery库让我们的幻灯片更具互动性和动画效果。

这个理论

我们要做的第一件事是“撤销”我们在CSS中声明的处理JavaScript关闭场景的样式。这涉及到在JavaScript中声明CSS样式# slidesContainer删除其滚动条。另外，我们必须调整我们的.slidediv来560 px，我们将其还原20 px以容纳滚动条。

我们还想将div浮动到左边，以便它们水平地并排显示，而不是垂直地堆叠在一起。然后，通过DOM操作，插入一个名为# slideInner它包围了所有幻灯片宽度等于所有幻灯片的总宽度.slide最后，插入左、右控件(类名为范式)作用户导航;我们在JavaScript中这样做，所以没有启用JavaScript的浏览器客户端将看不到控件。

下面是完整的JavaScript代码供您学习，但是我们将在后面详细地介绍它。

Block 5:整个jQuery脚本

$(文档).ready(函数(){var currentPosition = 0;var slideWidth = 560;Var slides = $('.slide');var numberOfSlides = slides.length;//删除JS中的滚动条$ (' # slidesContainer ') . css(“溢出”,“隐藏”);//使用#slideInner div包装所有的.slidesslides .wrapAll('
') //浮动左侧水平显示，重新调整.slides宽度。css({'浮动':'left'， '宽度':slideWidth});//设置#slideInner width为所有幻灯片的总宽度$('#slideInner').css('width'， slideWidth * numberOfSlides);//在DOM中插入左右箭头控件$('#slideshow') .prepend('左移') .append('右移');//在第一次加载时隐藏左箭头控件manageControls (currentPosition);//为.控件的点击创建事件监听器$(“范式”).bind(“点击”,函数(){//确定新的位置currentPosition = ($(this).attr('id')=='rightControl') ?currentPosition + 1: currentPosition-1;//隐藏/显示控件manageControls (currentPosition);//使用margin-left $('#slideInner')移动slideInner。动画({'marginLeft”:slideWidth* (currentposition)});})；// managecontrol:根据currentPosition隐藏和显示控件函数manageControls(位置){//如果位置是第一次滑动，则隐藏左箭头如果(位置= = 0){$ (' # leftControl ') hide()}其他{$ (' # leftControl '),告诉()}//隐藏右箭头，如果位置是最后一个幻灯片如果(位置= = numberOfSlides-1) {$ (' # rightControl ') hide()}{$(“# rightControl”),告诉其他 () } } });

创建一些对象

首先，我们在脚本的顶部初始化一些变量，我们将在整个脚本中使用这些变量。currentPosition将为包含幻灯片当前位置的数字。slideWidth每个的宽度是多少.slideDiv，固定为560 px．

我选择为。声明一个对象$ (' .slide ')选择器，使我们的代码看起来更干净，但你可以跳过这个，而使用完整的选择器($ (' .slide '))。最后，我们使用控件确定幻灯片中的幻灯片数量长处方法。

第6部分:变量和常量

varcurrentPosition = 0；varslideWidth = 560；var幻灯片= $ (' .slide ')；var numberOfSlides =slides.length；

移除滚动条

如果我们的脚本运行，那么我们的用户就启用了JavaScript—因此我们将通过设置的overflow属性来删除滚动条slidesContainer“隐藏的'这将取代溢出:汽车声明(参见Block 3)。

第7块:将CSS溢出属性值更改为隐藏

$ (' # slidesContainer '). css(“溢出”,“隐藏”)；

在DOM中插入一个div

我们将使用margin属性来左右移动幻灯片(稍后会详细介绍)。为此，我们需要创建一个div来包装所有的.slidediv，设置为与所有幻灯片的总宽度相同。通过调整这个div的margin属性(稍后)，我们将创建它左右移动的效果。

块8:插入# slideInner传入DOM.wrapAll ()方法

幻灯片.wrapAll(“< div id = " slideInner " > < / div >”)

我们还需要设置的宽度# slideInner，新创建的div，为所有的总宽度.slidediv。

块9:插入# slideInner传入DOM.wrapAll ()方法

$('#slideInner').css('width'， slideWidth * numberOfSlides);

使用JavaScript样式化Slideshow幻灯片

启用JavaScript后，我们希望将幻灯片浮动到左侧，以便它们并排显示。我们还想将它们的宽度设置为560 px因为我们不再有滚动条了。我们可以用链条. css方法，并将.wrapAll ()我们在Block 8中使用的方法。

块10:给.slidediv隐藏溢出:CSS属性

幻灯片. css(“溢出”,“隐藏”).wrapAll(“< div id = " slideInner " > < / div >”)

在DOM中插入控件

我们通过操作DOM插入控件;这样，使用禁用JavaScript的浏览器和屏幕阅读器的用户就不会有无效的HTML结构和控件，这将是令人困惑的，因为没有JavaScript，点击它们将无法工作。我们用.prepend ()而且.append ()方法将HTML字符串插入到所选对象中(在本例中为#幻灯片div选择)。span元素中的文本并不重要，因为它们是隐藏的

Block 11:在DOM中插入控件

$(' #幻灯片').prepend('左移').append(' move right');

使用函数管理左右箭头控件

为了管理控件，我们创建了一个名为manageControls它根据幻灯片的当前位置隐藏和显示左右箭头控件。如果它在第一张幻灯片上，我们将隐藏左侧控件，因为没有前面的幻灯片。在最后一张幻灯片上，我们隐藏了正确的控件，因为用户已经到达幻灯片的结尾。

我们通过使用hide ()而且,告诉()jQuery方法，隐藏/显示选定的DOM元素在它之前。

块12:manageControls ()函数

函数manageControls(位置){// position==0为第一张幻灯片如果(位置= = 0){$ (' # leftControl ')hide ()；} else {$('#leftControl'),告诉()；｝// numberOfSlides-1是最后一张幻灯片如果(位置= = numberOfSlides-1) {$ (' # rightControl ') hide ();} else {$('#rightControl').show();}}

调用manageControls ()在DOM准备好了

加载第一个脚本时，应该调用manageControls ()函数一次隐藏左箭头控件。叫它很容易，我们只是传递currentPosition论证它应该是什么0最初。

Block 13:在脚本加载时调用managecontrol () (domready事件)

manageControls (currentPosition);

将单击事件绑定到控件

jQuery幻灯片脚本的最后一步是将事件绑定到左右控件。这实际上创建了“事件监听器”，当用户单击左箭头或右箭头控件时触发函数。

Block 14:绑定一个click事件监听器到范式类

$(“范式”).bind(“点击”,函数(){//当用户点击时做某事})；

更新currentPosition的值

当用户单击一个控件时，我们更新currentPosition变量的值:如果用户单击了右箭头控件(ID为# rightControl)，然后我们在我们的currentPosition；如果用户单击左边的箭头控件(ID为# lefControl)，然后相减1从currentPosition．你下面看到的叫做三元运算符，它是if/else控制结构的简写。

第15块:设置新值的三元操作符currentPosition

currentPosition = ($(this).attr('id')=='rightControl') ?currentPosition + 1：currentPosition-1；

调用manageControls ()在更新currentPosition

的值调整之后currentPosition,我们叫manageControls ()再次根据新的幻灯片位置隐藏或显示控件。

块16:打电话manageControls ()内部.bind方法

manageControls (currentPosition);

动画幻灯片

最后,我们将# slideInner向左或向右移动margin-leftCSS属性值。左边距是幻灯片宽度乘以当前位置的负数。例如，如果我们移动到幻灯片3，那么左边距等于-1120 px．

17街区:使用.animate方法过渡margin-leftCSS属性

$ (" # slideInner”)。动画({'marginLeft”:slideWidth* (currentposition)});

总之

在本教程中，我们使用HTML、CSS和JavaScript (jQuery)创建了一个简单的幻灯片脚本。我们应用了渐进增强的概念来确保我们的幻灯片小部件在没有CSS和JavaScript的情况下工作，使我们的脚本web在大多数浏览场景下都可以访问。

反馈?问题吗?

你觉得这个教程怎么样?

你有没有感到困惑?这是最快的最有效的方法是什么?你发现错误或改进点了吗?

希望,这科技教程分解了足够多的东西，让它更容易遵循!请在评论中分享你的想法，以便我们在Six Revisions网站上改进教程。另外，如果你有问题，我们很乐意帮助你——所以不要害羞!

相关内容

• 使用XAMPP进行本地WordPress主题开发
• ie6中的JavaScript调试技术