jquery slider
Today we will create an auto-playing content slider with jQuery and CSS3. The idea is to alter the background image and to slide in the heading and the description. By clicking on one of the menu items, the auto-play function is stopped and the respective content slides out. So, let’s start with the markup.
今天，我们将使用jQuery和CSS3创建一个自动播放的内容滑块。 这个想法是改变背景图像，并在标题和描述中滑动。 通过单击菜单项之一，自动播放功能停止，相应的内容滑出。 因此，让我们从标记开始。
标记 (The Markup)
The HTML consists of a main div called rotator and an unordered list where we will define the menu element, the heading and the description element. The href will designate the regarding content that belongs to the menu item. Here is the markup with two example list elements and the empty list element that we will use to fill the content:
HTML由一个称为rotator的主div和一个无序列表组成，我们将在其中定义菜单元素，标题和description元素。 href将指定属于菜单项的相关内容。 这是带有两个示例列表元素和空列表元素的标记，我们将使用它们来填充内容：
<div class="rotator">
<ul id="rotmenu">
<li>
<a href="rot1">Portfolio</a>
<div style="display:none;">
<div class="info_image">1.jpg</div>
<div class="info_heading">Our Works</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot2">Services</a>
<div style="display:none;">
<div class="info_image">2.jpg</div>
<div class="info_heading">We serve</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
...
</ul>
<div id="rot1">
<img src="" width="800" height="300" class="bg" alt=""/>
<div class="heading">
<h1></h1>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
We use the information inside of the elements with a info_ class in order to fill our empty structure. The background image will have the source images/ and the image name.
我们使用info_类在元素内部使用信息，以填充我们的空结构。 背景图像将具有源图像/和图像名称。
CSS (The CSS)
The main rotator div will have the following style:
主旋转器div将具有以下样式：
.rotator{
background-color:#222;
width:800px;
height:300px;
margin:0px auto;
position:relative;
font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
color:#fff;
text-transform:uppercase;
letter-spacing:-1px;
border:3px solid #f0f0f0;
overflow:hidden;
-moz-box-shadow:0px 0px 10px #222;
-webkit-box-shadow:0px 0px 10px #222;
box-shadow:0px 0px 10px #222;
}
Since we will give the inner elements some absolute positioning, we need to set the position of the main div to relative. The style of the image that we will insert with the help of jQuery is such an example:
由于我们将给内部元素一些绝对的位置，因此我们需要将主div的位置设置为相对。 我们将借助jQuery插入的图像样式就是这样一个示例：
img.bg{
position:absolute;
top:0px;
left:0px;
}
The unordered list with all our elements needs to have a higher z-index then the rest of the elements, since we want it to be on top of everything else. If we would leave it to the default stacking, it would get hidden under the image:
我们希望所有元素的无序列表的z-index值要高于其余元素，因为我们希望它位于其他所有元素之上。 如果我们将其保留为默认堆叠，它将被隐藏在图像下方：
.rotator ul{
list-style:none;
position:absolute;
right:0px;
top:0px;
margin-top:6px;
z-index:999999;
}
.rotator ul li{
display:block;
float:left;
clear:both;
width:260px;
}
The link elements of the menu will have the following style:
菜单的链接元素将具有以下样式：
.rotator ul li a{
width:230px;
height:52px;
float:right;
clear:both;
padding-left:10px;
text-decoration:none;
display:block;
line-height:52px;
background-color:#222;
margin:1px -20px 1px 0px;
opacity:0.7;
color:#f0f0f0;
font-size:20px;
border:2px solid #000;
border-right:none;
outline:none;
text-shadow:-1px 1px 1px #000;
-moz-border-radius:10px 0px 0px 20px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:20px;
border-top-left-radius:10px;
border-bottom-left-radius:20px;
}
.rotator ul li a:hover{
text-shadow:0px 0px 2px #fff;
}
With the border radius property, we add an asymmetric touch to the menu items. The hover will create a glowing effect.
使用border radius属性，我们向菜单项添加了非对称触摸。 悬停会产生发光效果。
The content elements and the heading will have the following style:
内容元素和标题将具有以下样式：
.rotator .heading{
position:absolute;
top:0px;
left:0px;
width:500px;
}
.rotator .heading h1{
text-shadow:-1px 1px 1px #555;
font-weight:normal;
font-size:46px;
padding:20px;
}
.rotator .description{
width:500px;
height:80px;
position:absolute;
bottom:0px;
left:0px;
padding:20px;
background-color:#222;
-moz-border-radius:0px 10px 0px 0px;
-webkit-border-top-right-radius:10px;
border-top-right-radius:10px;
opacity:0.7;
border-top:2px solid #000;
border-right:2px solid #000;
}
.rotator .description p{
text-shadow:-1px 1px 1px #000;
text-transform:none;
letter-spacing:normal;
line-height:26px;
}
a.more{
color:orange;
text-decoration:none;
text-transform:uppercase;
font-size:10px;
}
a.more:hover{
color:#fff;
}
And now, let’s add some magic.
现在，让我们添加一些魔术。
JavaScript (The JavaScript)
First, we need to add the jQuery script and we will also use the jQuery Easing Plugin to create some neat easing effects:
首先，我们需要添加jQuery脚本，我们还将使用jQuery Easing Plugin创建一些简洁的缓动效果：
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
We will add this after all the content but before the body closing tag. Then we add this:
我们将在所有内容之后但在body结束标记之前添加此代码。 然后我们添加：
$(function() {
/* the index of the current list element */
var current = 1;
/* function to iterate through all the list elements */
var iterate = function(){
var i = parseInt(current+1);
var lis = $('#rotmenu').children('li').size();
if(i>lis) i = 1;
display($('#rotmenu li:nth-child('+i+')'));
}
/* Initially display the first one */
display($('#rotmenu li:first'));
/* In intervals of 3 seconds jump to the next element */
var slidetime = setInterval(iterate,3000);
/* if the User clicks on one list item, the auto slider stops */
$('#rotmenu li').bind('click',function(e){
clearTimeout(slidetime);
display($(this));
e.preventDefault();
});
/* displays each element associated to the "elem" list element */
function display(elem){
var $this = elem;
var repeat = false;
if(current == parseInt($this.index() + 1))
repeat = true;
/* slide in the current one */
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate({'marginRight':'-20px'},300,function(){
$(this).animate({'opacity':'0.7'},700);
});
current = parseInt($this.index() + 1);
var elem = $('a',$this);
/* slide out the clicked or next one */
elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);
/* the heading and description will slide out, change the content and slide back in */
var info_elem = elem.next();
$('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
$('h1',$(this)).html(info_elem.find('.info_heading').html());
$(this).animate({'left':'0px'},400,'easeInOutQuad');
});
$('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
$('p',$(this)).html(info_elem.find('.info_description').html());
$(this).animate({'bottom':'0px'},400,'easeInOutQuad');
})
/* the image will fade out and another will fade in */
$('#rot1').prepend(
$('
![]()
',{
style : 'opacity:0',
className : 'bg'
}).load(
function(){
$(this).animate({'opacity':'1'},600);
$('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
$(this).remove();
});
}
).attr('src','images/'+info_elem.find('.info_image').html())
.attr('width','800')
.attr('height','300')
);
}
});
And that’s it! I hope you enjoyed this tutorial and find it useful!
就是这样！ 我希望您喜欢本教程并发现它有用！
P.S. Google Chrome renders this piece pretty nicely so make sure you check it out. The CSS3 properties will not work in any version of IE and the rounded borders will not work in Opera.
PS Google Chrome浏览器很好地呈现了此图片，因此请确保将其签出。 CSS3属性在任何版本的IE中均不起作用，并且圆角边框在Opera中不起作用。
翻译自: https://tympanus.net/codrops/2010/04/28/pretty-simple-content-slider-with-jquery-and-css3/
jquery slider
2178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
