<section id="fader">
  <img src="img/pic1.jpg" alt="Image One">
  <img src="img/pic2.jpg" alt="Image Two">
  <img src="img/pic3.jpg" alt="Image Three">
  <img src="img/pic4.jpg" alt="Image Four">
  <img src="img/pic5.jpg" alt="Image Five">
  <img src="img/pic6.jpg" alt="Image Six">
</section>

<section id="fade">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6:D</div>
</section>

#fade {
position: relative;
width: 90%;
max-width: 600px;  
margin: 0 auto;  
top: 0px;
}
#fade div {
background-color: #f3f4ef;
border: 3px solid #f3f4ef;
padding: 10px;
-webkit-box-shadow: inset 0px 0px -2px 1px rgba(0,0,0, .4), 0px 0px 0px 1.5px rgba(0,0,0, .4);
-moz-box-shadow: inset 0px 0px -2px 1px rgba(0,0,0, .4), 0px 0px 0px 1.5px rgba(0,0,0, .4);
box-shadow: inset 0px 0px -2px 1px rgba(0,0,0, .4), 0px 0px 0px 1.5px rgba(0,0,0, .4);
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 150px;
color: #333;
font: 15px Verdana,sans-serif;
}

#fader {  
position: relative;
width: 90%;
max-width: 600px;  
margin: 0 auto;  
top: 20px;
}

#fader img {
background-color: #f3f4ef;
border: 3px solid #f3f4ef;
padding: 2px;
-webkit-box-shadow: inset 0px 0px -2px 1px rgba(0,0,0, .4), 0px 0px 0px 1.5px rgba(0,0,0, .4);
-moz-box-shadow: inset 0px 0px -2px 1px rgba(0,0,0, .4), 0px 0px 0px 1.5px rgba(0,0,0, .4);
box-shadow: inset 0px 0px -2px 1px rgba(0,0,0, .4), 0px 0px 0px 1.5px rgba(0,0,0, .4);
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
}

/*==Для изображений==*/
jQuery('#fader img:gt(0)').hide();
setInterval(function(){
  jQuery('#fader :first-child')
  .fadeTo(500, 0)
  .next('#fader img')
  .fadeTo(500, 1)
  .end()
  .appendTo('#fader');
}, 4000);

/*==Для текста==*/
jQuery('#fade div:gt(0)').hide();
setInterval(function(){
  jQuery('#fade :first-child')
  .fadeTo(500, 0)
  .next('#fade div')
  .fadeTo(500, 1)
  .end()
  .appendTo('#fade');
}, 2000);