为了更方便地访问从JavaScript每张幻灯片,每张幻灯片编号在其id名称。那么,副本被放置在一个新的<div>容器,副本的位置,以便更容易控制。
最后,在底部,你创建的标记,允许控制幻灯片的按钮,这样,当你按下按键“1”,例如,停止幻灯片,幻灯片显示“1”。
要看看它是如何结合在一起的好一点,让我们一点点的CSS应用。
body {
font-family: Arial, sans-serif;
}
div#tmpSlideshow {
margin: 10px;
padding: 30px 0 0 0;
position: relative;
height: 335px;
width: 755px;
border: 1px solid rgb(200, 200, 200);
}
div.tmpSlide {
position: absolute;
top: 0;
left: 0;
width: 730px;
height: 332px;
display: none;
}
div.tmpSlide img {
float: left;
margin: 30px 0 0 15px;
width: 527px;
border: 1px solid rgb(244, 244, 244);
}
div#tmpSlideshowControls {
position: absolute;
bottom: 30px;
right: 11px;
width: 175px;
}
div.tmpSlideshowControl {
border: 1px solid #e1dece;
float: left;
margin: 0 5px 0 0;
background: url('Feature.png') no-repeat;
width: 38px;
height: 36px;
color: #554d31;
font: 14px Arial, sans-serif;
text-align: center;
cursor: pointer;
}
div.tmpSlideshowControl span {
line-height: 36px;
vertical-align: middle;
}
div.tmpSlideshowControlOn {
background-image: url('FeatureOver.png');
}
div.tmpSlideshowControlActive {
border: 1px solid rgb(161, 155, 137);
}
div.tmpSlideCopy {
position: absolute;
left: 565px;
top: 20px;
width: 170px;
}
div#tmpSlideshow h4 {
color: #b90f23;
text-transform: uppercase;
font: 14px Arial, sans-serif;
margin: 10px 0;
}
div.tmpSlideCopy p {
font: 11px Arial, sans-serif;
line-height: 1.75em;
}
在前面这段CSS,每张幻灯片绝对定位,相对的 与ID名称tmpSlideshow的<DIV>,正如我答应他们会。然后,在每个滑动,每个图像是浮动左边,并且复制的向右侧绝对定位。进行控制的定位到容器底部。在一个非常无痛,直线前进样式表。
为了做好准备的jQuery,你添加了一些风格,将动态应用。样式控件时鼠标的用户,并表示滑动活跃,绘制深色边框围绕控制,与当前活动的幻灯片样式。
法治选择div.tmpSlideshowControlOn的应用,当用户将鼠标移到幻灯片控制。法治选择div.tmpSlideshowControlActive的用于指示滑动用户目前看到的画,深色边框围绕相关的控制。
现在,你有标记和CSS,最后一步是应用JavaScript和jQuery的,下面的代码使得幻灯片功能。
在JavaScript写成一个jQuery插件,其实两个插件。 SplitID()和幻灯片。
SplitID()是非常简单的,你怎么称呼它,它需要一个DOM标记元素,元素的id名,将它连上,并返回任何字符后出现的最后一个连字符。
例如,如果你有的id名称tmpSlide 3, SplitID()返回“3”。
第二个插件,幻灯片子功能,是一个对象,这个对象包含了所有相关的功能的幻灯片本身。
第一种方法,你看到里面的幻灯片对象是准备()方法。
body {
font-family: Arial, sans-serif;
}
div#tmpSlideshow {
margin: 10px;
padding: 30px 0 0 0;
position: relative;
height: 335px;
width: 755px;
border: 1px solid rgb(200, 200, 200);
}
div.tmpSlide {
position: absolute;
top: 0;
left: 0;
width: 730px;
height: 332px;
display: none;
}
div.tmpSlide img {
float: left;
margin: 30px 0 0 15px;
width: 527px;
border: 1px solid rgb(244, 244, 244);
}
div#tmpSlideshowControls {
position: absolute;
bottom: 30px;
right: 11px;
width: 175px;
}
div.tmpSlideshowControl {
border: 1px solid #e1dece;
float: left;
margin: 0 5px 0 0;
background: url('Feature.png') no-repeat;
width: 38px;
height: 36px;
color: #554d31;
font: 14px Arial, sans-serif;
text-align: center;
cursor: pointer;
}
div.tmpSlideshowControl span {
line-height: 36px;
vertical-align: middle;
}
div.tmpSlideshowControlOn {
background-image: url('FeatureOver.png');
}
div.tmpSlideshowControlActive {
border: 1px solid rgb(161, 155, 137);
}
div.tmpSlideCopy {
position: absolute;
left: 565px;
top: 20px;
width: 170px;
}
div#tmpSlideshow h4 {
color: #b90f23;
text-transform: uppercase;
font: 14px Arial, sans-serif;
margin: 10px 0;
}
div.tmpSlideCopy p {
font: 11px Arial, sans-serif;
line-height: 1.75em;
}
SplitID : function()
{
return this.attr('id').split('-').pop();
}
Ready : function()
{
$('div.tmpSlideshowControl')
.hover(
function() {
$(this).addClass('tmpSlideshowControlOn');
},
function() {
$(this).removeClass('tmpSlideshowControlOn');
}
)
.click(
function() {
$$.Slideshow.Interrupted = true;
$('div.tmpSlide').hide();
$('div.tmpSlideshowControl').removeClass('tmpSlideshowControlActive');
$('div#tmpSlide-' + $(this).SplitID()).show()
$(this).addClass('tmpSlideshowControlActive');
$$.Slideshow.Counter = parseInt($(this).SplitID());
setTimeout('$$.Slideshow.Resume();', 5000); // Resume after 5 seconds
}
);
this.Counter = 1;
this.Interupted = false;
this.Transition();
}
热门源码