24.08.2010, 13:12
|
Новичок на форуме
|
|
Регистрация: 24.08.2010
Сообщений: 8
|
|
Как сделать слайд шоу
Здравствуйте!
Подскажите пожалуйста как можно сделать что типа слайдера новостей, потому что я полный 0 в jquery. Нужно сделать так чтоб справа показывались последние 3 новости а рядом слева эти же 3 новости показывались слайдами.
я вот тут что то делал , вот код:
<script type="text/javascript">
$(document).ready(function(){
var scrollSpeed = 'slow';
var scrollDelay = 1000;
$('.scrollBlock .scrollItem').hide();
$('.scrollBlock').each(function(){
$(this).find('.scrollItem:first').show();
var obj=$(this).parent('div').find('.scrollItem:visible').html();
setTimeout(function(){ doSlide(obj); },scrollDelay);
});
$('.showItem').bind('click', bigpostView);
$('.showItem a').bind('click', cancelLink);
});
function doSlide(obj){
$('.scrollBlock').find('.scrollItem:visible').animate({opacity:"hide"},scrollSpeed,function(){
if($(this).html()==$(this).parent().find('.scrollItem:last').html()){
$(this).parent().find('.scrollItem:first').animate({opacity:"show"},scrollSpeed);
}else{
$(this).next('.scrollItem').animate({opacity:"show"},scrollSpeed);
}
}
function bigpostView(obj){
var bigpostContent = $(obj.target).html();
$('.bigpost').html(bigpostContent);
}
function cancelLink(obj){
obj.preventDefault();
//bigpostView($(this).parent());
return false;
}
</script>
<style type="text/css">
.bgScrollItem{
background:#CCCCCC;
}
</style>
<div class="bigpost">
<div class="scrollBlock">
<?php
$result_news = mysql_query("SELECT * FROM posts ORDER BY id DESC LIMIT 0, 3",$db);
if(!$result_news){
echo "<p>К сожелению произошла ошибка.</p><b>Код ошибки:</b>";
exit(mysql_error());
}
if(mysql_num_rows($result)>0){
$myrow_news = mysql_fetch_array($result_news);
}else{
exit ("К сожелению нет статей");
}
do{
printf("<div class='scrollItem'><img src='%s'><a href='viewpost.php?id=%s' rel='%s'><p>%s</p><p>%s...</p></a></div>\n",$myrow_news['img_url'],$myrow_news['id'],$myrow_news['id'],$myrow_news['title'],substr($myrow_news['text'],0,10));
}
while($myrow_news = mysql_fetch_array($result_news));
?>
</div>
</div>
<div class="minipost">
<?php
$result_news = mysql_query("SELECT * FROM posts ORDER BY id DESC LIMIT 0, 3",$db);
if(!$result_news){
echo "<p>К сожелению произошла ошибка.</p><b>Код ошибки:</b>";
exit(mysql_error());
}
if(mysql_num_rows($result)>0){
$myrow_news = mysql_fetch_array($result_news);
}else{
exit ("К сожелению нет статей");
}
do{
printf("<div class='showItem'><img src='%s'><a href='viewpost.php?id=%s' rel='%s'><p>%s</p><p>%s...</p></a></div>\n",$myrow_news['img_url'],$myrow_news['id'],$myrow_news['id'],$myrow_news['title'],substr($myrow_news['text'],0,10));
}
while($myrow_news = mysql_fetch_array($result_news));
?>
</div>
|
|
24.08.2010, 13:33
|
Интересующийся
|
|
Регистрация: 16.08.2009
Сообщений: 22
|
|
Я нихрена не понял что должно получиться в итоге.
|
|
24.08.2010, 13:36
|
Новичок на форуме
|
|
Регистрация: 24.08.2010
Сообщений: 8
|
|
в итоге короче должен получиться простенький слайдер новостей
|
|
24.08.2010, 14:08
|
Профессор
|
|
Регистрация: 16.03.2010
Сообщений: 1,618
|
|
Вы опубликовали очень много кода.
Пожалуйста, локализуйте проблему!
Выделите фрагмент кода, по которому есть вопрос и опубликуйте его отдельно.
И, по возможности, уберите из кода мусор, чтобы нам легче было сориентироваться и помочь решить вашу проблему.
Спасибо.
P.S. код форматируют специальные теги [ js ] ... [/js], [ html ] ... [/html] и другие аналогичные, сам. http://javascript.ru/formatting
|
|
24.08.2010, 14:40
|
Новичок на форуме
|
|
Регистрация: 24.08.2010
Сообщений: 8
|
|
у меня есть вот такой код каторый формирует последние 3 записи новостей
<div class="bigpost">
<div class="scrollBlock">
<?php
$result_news = mysql_query("SELECT * FROM posts ORDER BY id DESC LIMIT 0, 3",$db);
if(!$result_news){
echo "<p>К сожелению произошла ошибка.</p><b>Код ошибки:</b>";
exit(mysql_error());
}
if(mysql_num_rows($result)>0){
$myrow_news = mysql_fetch_array($result_news);
}else{
exit ("К сожелению нет статей");
}
do{
printf("<div class='scrollItem'><img src='%s'><a href='viewpost.php?id=%s' rel='%s'><p>%s</p><p>%s...</p></a></div>\n",$myrow_news['img_url'],$myrow_news['id'],$myrow_news['id'],$myrow_news['title'],substr($myrow_news['text'],0,10));
}
while($myrow_news = mysql_fetch_array($result_news));
?>
</div>
</div>
мне нужно сделать чтоб эти записи показывались в виде слайдов, желательно без использования различных плагинов
я вот сделал кое что, незнаю правильно или нет
$(document).ready(function(){
var scrollSpeed = 'normal';
var scrollDelay = 6000;
$('.scrollBlock .scrollItem').hide();
$('.scrollBlock').each(function(){
$(this).find('.scrollItem:first').animate({opacity:"show"}, scrollSpeed);
var obj = $(this).find('.scrollItem:visible').parent();
setTimeout(function(){ sildeShow(obj);},scrollDelay);
});
$('.showItem').bind('click', bigpostView);
$('.showItem a').bind('click', cancelLink);
});
function sildeShow(obj){
$(obj).find('.scrollItem:visible').hide();
}
а вот дальше не могу понять как сделать так чтоб при исчезновение одной записи появляллась следующая и так по кругу
|
|
27.08.2010, 20:22
|
Новичок на форуме
|
|
Регистрация: 27.08.2010
Сообщений: 3
|
|
для этого нужно назначить каждому диву свой id к примеру slide1,slide2,slide3. потом узнавать какой из них есть visible, прятать его и открывать следующий.
|
|
27.08.2010, 20:40
|
Новичок на форуме
|
|
Регистрация: 24.08.2010
Сообщений: 8
|
|
Спасибо, я с этим уже разобрался, меня мучает немного другой вопрос теперь, у меня есть строка:
<div class='showItem'><img src='./img/q7txk2og.jpg' align='left'><a href='viewpost.php?id=8' rel='8'><p>dfsd</p><p>sdfds...</p></a></div>
и скрипт который при щелчке должен отображать пост в другом div:
$('.showItem').bind('click', bigpostView);
$('.showItem a').bind('click', cancelLink);
function bigpostView(obj){
$('.bigpost').html(bigpostContent);
$('.bigpost').hide();
}
function cancelLink(obj){
obj.preventDefault();
$(obj).parent();//вот так не работает
bigpostView(obj);
return false;
}
у меня получилось сделать чтоб только при щелчке на div(showItem) показывает в другом div, а при щелчке на ссылку не получается, подскажите что не так
|
|
|
|