Но в моей панели не будет никаких стилей, просто список с двумя кнопками.
Как украсить этот слайдер это уже решать вам
Подразумевается, что у вас есть база со статистикой, где находится аватарка, имя, фамилия, id пользователя, рейтинг.
Урок по созданию базы пользователей
Конфиг, он же файл, который будет совершать запросы к базе
main.php
Код: Выделить всё
<?phpsession_start();/*Конфиг*/ //данные от базы $db_host="localhost"; $db_user="user"; $db_password="pass"; $db_name = "user"; $table_name = "table"; //название таблицы с данными $row1 = 'uid'; //столбец с id пользователя $row2 = 'image'; //столбец с ссылкой на аватарку пользователя $row3 = 'name'; //столбец с Имя Фамилия пользователя $row4 = 'presents'; //столбец с рейтингом // данные приложения $app_id = '3438138'; // id приложения $api_secret = 'qqqqqqqqqqqqqqqqqqqqq'; // защищенный ключ приложения/*Конец конфига*/ $auth_key = $_SESSION['auth_key']; //Высовываем из сессии auth_key $viewer_id = $_SESSION['viewer_id']; //Высовываем из сессии viewer_id $number = $_POST['number']; //Ловим number $real_key = md5($app_id."_".$viewer_id."_".$api_secret); if ($auth_key == $real_key){ //проверка // соединение с БД mysql_connect($db_host, $db_user, $db_password) or die (mysql_error()); mysql_select_db($db_name) or die (mysql_error()); mysql_query("SET NAMES 'utf8'"); $query = "SELECT * FROM ".$table_name." order by `".$row4."` desc limit {$number},10"; $sql = mysql_query($query); while ($sql_data = mysql_fetch_array($sql)) { echo "={$sql_data[$row1]}={$sql_data[$row2]}={$sql_data[$row3]}={$sql_data[$row4]}|"; //выводим в таком виде, чтобы проще было записать в массив } }?>
Код: Выделить всё
<?phpsession_start();$_SESSION = $_GET; //У меня данные будут храниться в сессии.?><html><head> <script src="http://vk.com/js/api/xd_connection.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script type="text/javascript" charset="utf8" > $(document).ready(function() { //объявляем переменные var number = 0; var i=0; var details = new Array(); var newdetails = new Array(); var display = ''; //Первые 10 человек $.post('main.php',{"number": number},function(data){ //отправляем details = data.split('|'); //записываем в массив данные для каждого пользователя for (i=0;i< 10; i++) { newdetails = details[i].split('='); //разделяем данные в массиве для каждого пользователя display += "<img src='" + newdetails[2] + "'>" + " ID: " + newdetails[1] + " Name: " + newdetails[3] + " Level: " + newdetails[4] + "<br>"; // и сразу записываем эти данные } $("#ratingbox").html(display); //выводим display = ''; }); //По нажатию кнопки 'Вперед' посылаем запрос $("#next").click(function() { number = number + 10; //увеличиваем в запросе значение LIMIT $.post('main.php',{"number": number},function(data){ //отправляем это значение details = data.split('|'); //опять разделяем данные for (i=0;i< 10; i++) { newdetails = details[i].split('='); display += "<img src='" + newdetails[2] + "'>" + " ID: " + newdetails[1] + " Name: " + newdetails[3] + " Level: " + newdetails[4] + "<br>"; } $("#ratingbox").html(display); display = ''; }); $("#back").css('display', 'block'); //после нажатии кнопки 'Вперед' можно и кнопку назад показать :) }); // тоже самое, что при нажатии на кнопкю 'Вперед', только добавили проверку, чтобы LIMIT в минус не ушел. $("#back").click(function() { if(number >= 10) { number = number - 10; $.post('main.php', {"number": number}, function(data){ details = data.split('|'); for (i=0;i< 10; i++) { newdetails = details[i].split('='); display += "<img src='" + newdetails[2] + "'>" + " ID: " + newdetails[1] + " Name: " + newdetails[3] + " Level: " + newdetails[4] + "<br>"; } $("#ratingbox").html(display); display = ''; }); } if(number < 10) { $("#back").css('display', 'none'); //если вернулись на первую страницу, то убираем кнопку 'Назад'. } }); }); </script></head><body> <div id="ratingbox"></div> <div id="next">Вперед</div> <div id="back" style='display:none;'>Назад</div></body></html>
Исходники http://rghost.ru/43915517