Как сделать слайд шоу
Вложений: 1
Здравствуйте!
Подскажите пожалуйста как можно сделать что типа слайдера новостей, потому что я полный 0 в jquery. Нужно сделать так чтоб справа показывались последние 3 новости а рядом слева эти же 3 новости показывались слайдами. я вот тут что то делал:write: , вот код: <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> |
Я нихрена не понял что должно получиться в итоге.
|
:)
в итоге короче должен получиться простенький слайдер новостей |
Вы опубликовали очень много кода.
Пожалуйста, локализуйте проблему! Выделите фрагмент кода, по которому есть вопрос и опубликуйте его отдельно. И, по возможности, уберите из кода мусор, чтобы нам легче было сориентироваться и помочь решить вашу проблему. Спасибо. P.S. код форматируют специальные теги [ js ] ... [/js], [ html ] ... [/html] и другие аналогичные, сам. http://javascript.ru/formatting |
у меня есть вот такой код каторый формирует последние 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(); } а вот дальше не могу понять как сделать так чтоб при исчезновение одной записи появляллась следующая и так по кругу :help: |
для этого нужно назначить каждому диву свой id к примеру slide1,slide2,slide3. потом узнавать какой из них есть visible, прятать его и открывать следующий.
|
Спасибо, я с этим уже разобрался, меня мучает немного другой вопрос теперь, у меня есть строка:
<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, а при щелчке на ссылку не получается, подскажите что не так |
Часовой пояс GMT +3, время: 22:54. |