创建jQuery Slider的简单方法 [英] Simple way of creating jQuery Slider

问题描述

我想创建一个简单的基于静态jQuery的滑块。现在我只是有设计。它在右下角有小点作为分页，带有标题，图像和一些内容。它应该能够无限循环，也应该有能力播放和暂停。

解决方案

今天，我尝试了一个内容滑块，使用固定分页。我实现了这个东西，在发布后我会说。我可以简单地使用一个插件，但由于一些技术问题，我也想学习一些东西，所以我在我的onw上做了。

我开始了使用HTML标记，从两个 UL s开始。一个包含幻灯片的分页和另一个内容。

从这个 HTML标记，我转到 CSS 和定位布局元素。 >

 < ul class =content-pagination> 
< li>< a href =0>< / a>< / li> 
< li>< a href =1>< / a>< / li> 
< li>< a href =2>< / a>< / li> 
< li>< a href =3>< / a>< / li> 
< li>< a href =4>< / a>< / li> 
< / ul> 
 
< ul class =content-slides> 
< li> 
< img src =slides / background1.pngalt =/> 
< div class =desc> 
< h3>标题1< / h3> 
< p> Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。自从16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本！< / p> 
< / div> 
< / li> 
< li> 
< img src =slides / background2.pngalt =/> 
< div class =desc> 
< h3>标题2< / h3> 
< p> Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。自从16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本！< / p> 
< / div> 
< / li> 
< li> 
< img src =slides / background3.pngalt =/> 
< div class =desc> 
< h3>标题3< / h3> 
< p> Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。自从16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本！< / p> 
< / div> 
< / li> 
< li> 
< img src =slides / background4.pngalt =/> 
< div class =desc> 
< h3>标题4< / h3> 
< p> Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。自从16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本！< / p> 
< / div> 
< / li> 
< li> 
< img src =slides / background5.pngalt =/> 
< div class =desc> 
< h3>标题5< / h3> 
< p> Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。自从16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本！< / p> 
< / div> 
< / li> 
< / ul> 
  

我修复由古老的 Internet Explorer 7 和稍微现代的 Internet Explorer 8 浏览器，所以我不得不插入他们专有的黑客形式并修复它们！ final CSS 是这样来的：

CSS

  .slider {padding：0; height：150px;位置：相对;溢出：隐藏; width：270px;} 
 .slider .content-slides {position：absolute; top：0;左：0;填充：0; margin：0;} 
 .slider .content-slides li {width：270px; height：150px;位置：相对;向左飘浮; list-style：none;} 
 .slider .content-slides li img {width：270px; height：150px; display：block;} 
 .slider .content-slides li .desc {position：absolute;字体大小：90％;背景：＃999;背景：rgba（0，0，0，0.5）;左：0; top：0;宽度：100％;溢出：隐藏; padding：0 0 5px;} 
 .slider .content-slides li .desc * {color：#fff;宽度：200px; margin：5px 10px; line-height：1.1em;} 
 .slider .content-pagination {text-align：right;位置：绝对;底部：10px;右：10px; z-index：5;} 
 .slider .content-pagination li {float：none;显示：内联; font-size：0.75em; padding：0.25em;} 
 .slider .content-pagination li a {width：7px;高度：7px; border-radius：7px; background-color：#ccc;溢出：隐藏; line-height：10px; font-size：1px;文本缩进：-999em;显示：inline-block; *显示：内联; * zoom：1;} 
 .slider .content-pagination li.active-marker a，
 .slider .content-pagination li a：hover {background-color：＃08c; color：#fff;} 
  

而且，背景的宽度和高度图像是固定的，它们是 270px×150px 。

现在来了一个非常有趣的部分，一小时！ JavaScript 像任何事物一样消耗时间！ :)我不得不承认，我在JavaScript中采用了一种低质量的方法，因为我只关注 5内容，总是分页，不是可扩展的在未来的滑块。

JavaScript

首先，我没有想法这些滑块如何工作，但我有一个小想法，即 UL 将具有所有 LI S，它拥有。因此，这成为第一个声明：



  $（。slider .content-slides）。width（$（。滑块.content-slides）。children（）。size（）* $（。slider.content-slides）。width（））; 
  

我需要一个计数器来保存当前页面的请求。所以我初始化了一个计数器 index ，并为它赋值 0 。很多人都错过了这部分！



  index = 0; 
  

下一步是创建一个函数，该函数动画整个滑块。是的，我用 jQuery 来帮助我！所以，这个函数就是这样的：

pre $ $ $ $ $ $ $ $ $ $ $ b $ curPage =（（index ）％$（。slider .content-slides）。children（）。size（））+ 1;
$（。slider.content-slides）。animate（{$ b $left： - （$（。slider .content-slides li：nth-​​child（+ curPage +）） ）.position（）。left）
}）;
$（。slider .content-pagination li）。removeClass（active-marker）;
$（。slider .content-pagination li：nth-​​child（+ curPage +））。addClass（active-marker）;
index ++;

$ / code>

由于我声明 index 作为一个全局变量，我可以随时随地访问它。它的范围通过脚本和内部函数是有效的。我将当前页面的一个变量初始化为 index 除以的 count 的
$ b 接下来是非常棒的 animate（）函数，其中jQuery提供。它用于更改在平滑过渡中给出的 CSS属性，而不是剧烈或突然的更改。此函数现在将列表容器 UL 的左边位置移动（幻灯片）以适应下一个 LI 元素。 p>



然后是分页内容。它使用另一个令人敬畏的 CSS / jQuery Selector ，：nth-​​child（）添加当前幻灯片，从字面上选择容器的第n个子项。加载幻灯片后，相应的 LI 将通过添加类活动标记为活动。

最后， index 的值使用传统方式增加1！

进入下一个函数，即将点击事件添加到分页按钮。我认为这将是复杂的方式，但我设法通过设置 index 值，清除旧计时器并重新启动滑块功能以简单的方式实现。 / p>

  $（。slider .content-pagination li a）。click（function（）{
 index = $ （this）.attr（href）; 
 clearInterval（islider）; 
 slideStart（）; 
 islider = setInterval（slideStart（），2500）; 
 return假; 
}）; 
  

我在此处添加了 return false; 以防止链接跟随它的URL，否则它会从其 href 属性中打开URL。现在是最后一部分和重要部分。脚本的初始化程序。我们只需要使用函数 slideStart（）来启动滑块，让它运行一段固定的时间间隔，比如 2.5秒。由于需要在文档加载后执行，因此在 $（document）.ready（）函数中给出。

  $（document）.ready（function（）{
 slideStart（）; 
 islider = setInterval（slideStart（），2500）; 
}）; 
  

最终JavaScript

 < $（。slider.content-slides）。width（$（。slider.content-slides）。children（）。size（）* $（。slider .content-slides） 。宽度（））; 
 
 
函数slideStart（）
 {
 curPage =（（index）％$（。slider .content-slides）。children（）。size ））+ 1; 
 $（。slider.content-slides）。animate（{$ b $left： - （$（。slider .content-slides li：nth-​​child（+ curPage +）） ）.position（）。left）
}）; 
 $（。slider .content-pagination li）。removeClass（active-marker）; 
 $（。slider .content-pagination li：nth-​​child（+ curPage +））。addClass（active-marker）; 
 index ++; 
 
 
 $ b $（。slider .content-pagination li a）。click（function（）{
 index = $（this）.attr（ href）; 
 clearInterval（islider）; 
 slideStart（）; 
 islider = setInterval（slideStart（），2500）; 
 return false; 
 }）; 
 
 $（document）.ready（function（）{
 index = 0; 
 islider = setInterval（slideStart（），2500）; 
}） ; 
  

完整演示： http://jsbin.com/uhowak/2

希望这可以帮助别人！ ：）

I wanted to create a simple static jQuery based slider. Right now I just have the design. It has small dots as pagination in the right bottom, with a heading, an image and some content. It should be able to loop infinitely and also should have the ability to play and pause. Not much features are required.

解决方案

Today I tried a content slider, with fixed pagination. I implemented this for something, which I would say after it is released. I could have simply used a plug-in, but due to some technical issues, and I too wanted to learn something, so I did it on my onw.

I started with the HTML Markup, starting with two ULs. One holds the pagination and the other, content for the slides.

Starting with this HTML Markup, I moved on to the CSS and positioned the layout elements.

HTML

<ul class="content-pagination">
    <li><a href="0"></a></li>
    <li><a href="1"></a></li>
    <li><a href="2"></a></li>
    <li><a href="3"></a></li>
    <li><a href="4"></a></li>
</ul>

<ul class="content-slides">
    <li>
        <img src="slides/background1.png" alt="" />
        <div class="desc">
            <h3>Heading 1</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
        </div>
    </li>
    <li>
        <img src="slides/background2.png" alt="" />
        <div class="desc">
            <h3>Heading 2</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
        </div>
    </li>
    <li>
        <img src="slides/background3.png" alt="" />
        <div class="desc">
            <h3>Heading 3</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
        </div>
    </li>
    <li>
        <img src="slides/background4.png" alt="" />
        <div class="desc">
            <h3>Heading 4</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
        </div>
    </li>
    <li>
        <img src="slides/background5.png" alt="" />
        <div class="desc">
            <h3>Heading 5</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.</p>
        </div>
    </li>
</ul>

I had somewhat a hard time fixing the issues caused by our ancient Internet Explorer 7 and slightly modern Internet Explorer 8 browsers, so I had to meddle with their proprietary form of hacking and fixed them! The final CSS came this way:

CSS

.slider {padding: 0; height: 150px; position: relative; overflow: hidden; width: 270px;}
.slider .content-slides {position: absolute; top: 0; left: 0; padding: 0; margin: 0;}
.slider .content-slides li {width: 270px; height: 150px; position: relative; float: left; list-style: none;}
.slider .content-slides li img {width: 270px; height: 150px; display: block;}
.slider .content-slides li .desc {position: absolute; font-size: 90%; background: #999; background: rgba(0, 0, 0, 0.5); left: 0; top: 0; width: 100%; overflow: hidden; padding: 0 0 5px;}
.slider .content-slides li .desc * {color: #fff; width: 200px; margin: 5px 10px; line-height: 1.1em;}
.slider .content-pagination {text-align: right; position: absolute; bottom: 10px; right: 10px; z-index: 5;}
.slider .content-pagination li {float: none; display: inline; font-size: 0.75em; padding: 0.25em;}
.slider .content-pagination li a {width: 7px; height: 7px; border-radius: 7px; background-color: #ccc; overflow: hidden; line-height: 10px; font-size: 1px; text-indent: -999em; display: inline-block; *display: inline; *zoom: 1;}
.slider .content-pagination li.active-marker a,
.slider .content-pagination li a:hover {background-color: #08c; color: #fff;}

And yeah, the width and height of background images are fixed and they were 270px × 150px.

Now comes the really interesting part, which took me about an hour! The JavaScript rocks in consuming time like anything! :) I have to admit that I took a kind of low quality approach in my JavaScript, as I was concerned only about this 5 Content always with pagination and not scalable in future kind of a slider.

JavaScript

First of all, I had no idea how these sliders work, but I had a small idea that the UL will be having the width of sum of all the LIs, which it holds. So, that became the first statement:

$(".slider .content-slides").width($(".slider .content-slides").children().size() * $(".slider .content-slides").width());

I need a counter to hold the current page been requested. So I initialized a counter index and assigning it a value 0. Many of you people missed this part!!! Add this too!

index = 0;

The next step is to create a function, which animates the whole slider. Yeah, I used jQuery to help me out! So, the function goes this way:

function slideStart()
{
    curPage = ((index) % $(".slider .content-slides").children().size()) + 1;
    $(".slider .content-slides").animate({
        "left": -($(".slider .content-slides li:nth-child(" + curPage + ")").position().left)
    });
    $(".slider .content-pagination li").removeClass("active-marker");
    $(".slider .content-pagination li:nth-child(" + curPage + ")").addClass("active-marker");
    index++;
}

Since I declared index as a global variable, I can access it at any time from anywhere. Its scope is valid through the scripts and inside functions. I initialized a variable for the current page as the modulus value of the count of index divided by the number of children inside slider.

The next comes the awesome animate() function, which jQuery provides. It is used to change the CSS Properties as given in a smooth transition instead of a drastic or sudden change. This function now moves (slides) the left position of the list container UL to fit the next LI element.

Then comes the pagination stuff. It adds the current slide using another awesome CSS / jQuery Selector, :nth-child(), which literally selects the nth child of the container. Once a slide is loaded, the corresponding LI will be marked as active by adding a class active.

Finally the value of index is incremented by 1 using the traditional way!

Coming to the next function, which is adding the click event to the pagination buttons. I thought this would be the complicated way, but I managed to do in a simple way by just setting the index value, clearing the old timer, and restarting the slider function.

$(".slider .content-pagination li a").click(function(){
    index = $(this).attr("href");
    clearInterval(islider);
    slideStart();
    islider = setInterval("slideStart()", 2500);
    return false;
});

I added a return false; at the end to prevent the link from following the URL of it, else it would open the URL from its href attribute. Now comes the final part and the important one. The initializer for the script. We just need to start the slider using the function slideStart() and let it run for a fixed interval, say 2.5 seconds. Since it needs to be executed after the document is loaded, it is given inside the $(document).ready() function.

$(document).ready(function(){
    slideStart();
    islider = setInterval("slideStart()", 2500);
});

Final JavaScript

$(".slider .content-slides").width($(".slider .content-slides").children().size() * $(".slider .content-slides").width());


function slideStart()
{
    curPage = ((index) % $(".slider .content-slides").children().size()) + 1;
    $(".slider .content-slides").animate({
        "left": -($(".slider .content-slides li:nth-child(" + curPage + ")").position().left)
    });
    $(".slider .content-pagination li").removeClass("active-marker");
    $(".slider .content-pagination li:nth-child(" + curPage + ")").addClass("active-marker");
    index++;
}


$(".slider .content-pagination li a").click(function(){
    index = $(this).attr("href");
    clearInterval(islider);
    slideStart();
    islider = setInterval("slideStart()", 2500);
    return false;
});

$(document).ready(function(){
    index = 0;
    islider = setInterval("slideStart()", 2500);
});

Full Demo: http://jsbin.com/uhowak/2

Hope this helps someone! :)

这篇关于创建jQuery Slider的简单方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！