<!-- Cлайдер-->
<style type="text/css">
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background: transparent none;
position:relative;
}

#slideshow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:263px;
  position:relative;
}

#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:540px; /* На двадцать пикселев меньше чем ширина #slidesContainer */
  overflow-y:auto; /* поддержка прокрутки */
  height:263px;
  text-align: center;
}

.control {
  display:block;
  width:25px;
  height:175px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
  z-index:100;
}

#leftControl {
  top:44px;
  left:0;
  background:transparent url(левая стрелка) no-repeat 0 0;
}

#rightControl {
  top:44px;
  right:0;
  background:transparent url(правая стрелка) no-repeat 0 0;
}
</style>
<div id="slideshow">
    <div id="slidesContainer">
      <div class="slide">
<table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width: 33%;" align="center" valign="top">

<img src="добро пожаловать">
<br/><br/>

текст текст текст текст

</td>
<td style="width: 33%;" align="center" valign="top">

<img src="игрок мес.">
<br/><br/>

<img src="авик">

</td>
<td style="width: 33%;" align="center" valign="top">

<img src="новости форума">
<br/><br/>

текст текст текст текст

</td>
</tr>
</table>
      </div>
<div class="slide">
<table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width: 33%;" align="center" valign="top">

<img src="навигация">
<br/><br/>

текст текст текст текст

</td>
<td style="width: 33%;" align="center" valign="top">

<img src="администрация">
<br/><br/>

текст текст текст текст

</td>
<td style="width: 33%;" align="center" valign="top">

<img src="акции">
<br/><br/>

текст текст текст текст

</td>
</tr>
</table>
      </div>
<div class="slide">

<img src="партнеры">
<br/><br/>

коды баннеров

<br/><br/><img src="ротация"><br/><br/>

коды баннеров

      </div>
   </div>
</div>
<!--End// Cлайдер-->

<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  // С помощью скрипта убираем прокрутку в контейнере.
  $('#slidesContainer').css('overflow', 'hidden');
  // Свернем все вкладки .slides в блок #slideInner 
  slides .wrapAll('<div id="slideInner"></div>')
.css({
      'float' : 'left',
      'width' : slideWidth
    });
  // Проставим блоку #slideInner ширину, равную общей ширине контейнеров
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
  manageControls(currentPosition);
  $('.control')
    .bind('click', function(){
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    manageControls(currentPosition);
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });
  function manageControls(position){
    // Скрыть левую стрелку у первого контейнера
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Скрыть правую стрелку у последнего контейнера
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
});
</script>

<style type="text/css">
#pun-announcement .container {margin-left: -52px;}
</style>

<script src="http://ruseller.com/lessons/les809/demo/booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://ruseller.com/lessons/les809/demo/booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
<link href="http://ruseller.com/lessons/les809/demo/booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />

<style> 
.booklet{
	-moz-box-shadow:0px 0px 1px #fff;
	-webkit-box-shadow:0px 0px 1px #fff;
	box-shadow:0px 0px 1px #fff;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

.booklet .b-wrap-left  {
	background:#fff url(http://ruseller.com/lessons/les809/demo/images/left_bg.jpg) no-repeat top left;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-topleft:10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.booklet .b-wrap-right {
	background:#efefef url(http://ruseller.com/lessons/les809/demo/images/right_bg.jpg) no-repeat top left;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.booklet .b-counter {
	bottom:10px;
	position:absolute;
	display:block;
	width:80%;
	height:20px;
	border-top:1px solid #ddd;
	color:#222;
	text-align:center;
	font-size:12px;
	padding:5px 0 0;
	background:transparent;
	-moz-box-shadow:0px -1px 1px #fff;
	-webkit-box-shadow:0px -1px 1px #fff;
	box-shadow:0px -1px 1px #fff;
	opacity:0.8;
}

.book_wrapper{
	margin:0 auto;
	padding-top:50px;
	width:860px;
	height:540px;
	position:relative;
	background:transparent url(https://forumstatic.ru/files/000d/19/7b/55725.png) no-repeat 28px 29px;
}

.book_wrapper h1{
	color:#13386a;
	margin:5px 5px 5px 15px;
	font-size:26px;
	background:transparent url(http://ruseller.com/lessons/les809/demo/images/h1.png) no-repeat bottom left;
	padding-bottom:7px;
}

.book_wrapper p{
	font-size:14px;
	margin:5px 5px 5px 15px;
}

.book_wrapper img{
	margin:10px 0px 5px 35px;
	width:300px;
	padding:4px;
	border:1px solid #ddd;
	-moz-box-shadow:1px 1px 1px #fff;
	-webkit-box-shadow:1px 1px 1px #fff;
	box-shadow:1px 1px 1px #fff;
}

.booklet .b-wrap-right img{
	border:1px solid #E6E3C2;
}

a#next_page_button, a#prev_page_button{
	display:none;
	position:absolute;
	width:36px;
	height:40px;
	cursor:pointer;
	margin-top:-20px;
	top:50%;
	background:transparent url(http://ruseller.com/lessons/les809/demo/images/buttons.png) no-repeat 0px -40px;
}

a#prev_page_button{
	left:-8px;
}

a#next_page_button{
	right:-6px;
	background-position:-41px -40px;
}

a#next_page_button:hover{
	background-position:-41px 0px;
}

a#prev_page_button:hover{
	background-position:0px 0px;
}

.loading{
	width:160px;
	height:56px;
	position: absolute;
	top:50%;
	margin-top:-28px;
	right:135px;
	line-height:56px;
	color:#fff;
	padding-left:60px;
	font-size:15px;
	background: #000 url(http://ruseller.com/lessons/les809/demo/images/ajax-loader.gif) no-repeat 10px 50%;
	opacity: 0.7;
	z-index:9999;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

</style>

<div class="book_wrapper">
<a id="next_page_button"></a>
<a id="prev_page_button"></a>
<div id="loading" class="loading">Загрузка</div>
<div id="mybook" style="display:none;">
<div class="b-load">
<div>
<img src="http://ruseller.com/lessons/les809/demo/images/1.jpg" alt=""/>
<h1>Заголовок 1</h1>
<p>Текст текст текст текст</p>
</div>
<div>
<img src="http://ruseller.com/lessons/les809/demo/images/3.jpg" alt="" />
<h1>Заголовок 2</h1>
<p>Текст текст текст текст</p>
</div>
<div>
<img src="http://ruseller.com/lessons/les809/demo/images/4.jpg" alt="" />
<h1>Заголовок 3</h1>
<p>Текст текст текст текст</p>
</div>
</div>
</div>

<script type="text/javascript">



	$(function() {



var $mybook = $('#mybook');



var $bttn_next= $('#next_page_button');



var $bttn_prev= $('#prev_page_button');



var $loading= $('#loading');



var $mybook_images	= $mybook.find('img');



var cnt_images= $mybook_images.length;



var loaded	= 0;



//Предварительно загружаем все страницы в книжке,



//а затем вызываем плагин Booklet







$mybook_images.each(function(){



	var $img 	= $(this);



	var source	= $img.attr('src');



	$('<img/>').load(function(){



++loaded;



if(loaded == cnt_images){



	$loading.hide();



	$bttn_next.show();



	$bttn_prev.show();



	$mybook.show().booklet({



name:               null,                            // Имя буклета, которое выводится в заголовке документа



width:              725,                             // Ширина контейнера



height:             450,                             // Высота контейнера



speed:              600,                             // Скорость перехода между страницами



direction:          'LTR',                           // Направление организации контента, по умолчанию LTR (left to right - слева направо), может быть RTL  (справа налево)



startingPage:       0,                               // Индекс страницы, которая будет выводиться первой



easing:             'easeInOutQuad',                 // Метод сглаживания для завершения трансформации



easeIn:             'easeInQuad',                    // Метод сглаживания для первой половины трансформации



easeOut:            'easeOutQuad',                   // Метод сглаживания для второй половины трансформации







closed:             true,                            // Запускаем книгу "закрытой", будут добавлены пустые страницы в начало и конец



closedFrontTitle:   null,                            // Используется с опциями "closed", "menu" и "pageSelector", определяет заголовок пустой начальной старницы



closedFrontChapter: null,                            // Используется с опциями "closed", "menu" и "chapterSelector", определяет имя главы пустой начальной страницы



closedBackTitle:    null,                            // Используется с опциями "closed", "menu" и "pageSelector", определяет заголовок пустой последней страницы



closedBackChapter:  null,                            // Используется с опциями "closed", "menu" и "chapterSelector", определяет имя главы пустой конечной страницы



covers:             false,                           // Используется с опцией "closed", делает первую и последнюю страницу обложками, без нумерации страниц (если возможно)







pagePadding:        10,                              // Отступ для обертки каждой страницы



pageNumbers:        true,                            // Выводит номер на каждой странице







hovers:             false,                           // Разрешает анимацию предварительного просмотра страниц при наведени курсора мыши, выводятся маленькие изображения предыдущей и следующей страницы



overlays:           false,                           // Разрешает навигацию с использованием слоя перекрытия, когда разрешено - ссылки в контексте не будут реагировать на нажатия кнопки мыши



tabs:               false,                           // Добавляет закладки вдоль верха страницы



tabWidth:           60,                              // Определяем ширину закладок



tabHeight:          20,                              // Определяем высоту закладок



arrows:             false,                           // Добавляем стрелки поверх кромок книжки



cursor:             'pointer',                       // Установка css для курсора для боковой области книжки







hash:              true,                           // Разрешает навигацию с использованием хэш строки, например: #/page/1 для страницы 1, будет действовать на все книжки с разрешенной опцией 'hash'



keyboard:           true,                            // Разрешает навигацию с использованием клавиш стрелок(влево: предыдущая страница, вправо: следующая)



next:               $bttn_next,          	 // Селектор для элемента, который используется как выключатель перехода к следующей странице



prev:               $bttn_prev,          	 // Селектор для элемента, который используется как выключатель перехода к предыдущей странице







menu:              null,                            // Селектор элемента, который используется как область меню, требуется для 'pageSelector'



pageSelector:       false,                           // Разрешает навигацию с помощью выпадающего меню для страниц, требует опции 'menu'



chapterSelector:    false,                           // Разрешает навигацию с помощью выпадающего меню глав, определяется атрибутом "rel", требует опции 'menu'







shadows:            true,                            // Выводить тени при анимации страниц



shadowTopFwdWidth:  166,                             // Ширина тени для верха анимации вперед



shadowTopBackWidth: 166,                             // Ширина тени для верха анимации назад



shadowBtmWidth:     50,                              // Ширина тени для низа анимации







before:             function(){},                    // Возвратная функция, которая вызывается перед выполенением каждой анимации



after:              function(){}                     // Возвратная функция, которая вызывается после выполнения каждой анимации



	});





}



	}).attr('src',source);



});







	});



        </script>