Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.08.2010, 13:12
Новичок на форуме
Отправить личное сообщение для mdiimas Посмотреть профиль Найти все сообщения от mdiimas
 
Регистрация: 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>
Вложения:
Тип файла: zip latestnews.zip (1.0 Кб, 2 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 24.08.2010, 13:33
Интересующийся
Отправить личное сообщение для roma86 Посмотреть профиль Найти все сообщения от roma86
 
Регистрация: 16.08.2009
Сообщений: 22

Я нихрена не понял что должно получиться в итоге.
Ответить с цитированием
  #3 (permalink)  
Старый 24.08.2010, 13:36
Новичок на форуме
Отправить личное сообщение для mdiimas Посмотреть профиль Найти все сообщения от mdiimas
 
Регистрация: 24.08.2010
Сообщений: 8



в итоге короче должен получиться простенький слайдер новостей
Ответить с цитированием
  #4 (permalink)  
Старый 24.08.2010, 14:08
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Вы опубликовали очень много кода.

Пожалуйста, локализуйте проблему!

Выделите фрагмент кода, по которому есть вопрос и опубликуйте его отдельно.

И, по возможности, уберите из кода мусор, чтобы нам легче было сориентироваться и помочь решить вашу проблему.

Спасибо.

P.S. код форматируют специальные теги [ js ] ... [/js], [ html ] ... [/html] и другие аналогичные, сам. http://javascript.ru/formatting
Ответить с цитированием
  #5 (permalink)  
Старый 24.08.2010, 14:40
Новичок на форуме
Отправить личное сообщение для mdiimas Посмотреть профиль Найти все сообщения от mdiimas
 
Регистрация: 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();
	}


а вот дальше не могу понять как сделать так чтоб при исчезновение одной записи появляллась следующая и так по кругу
Ответить с цитированием
  #6 (permalink)  
Старый 27.08.2010, 20:22
Новичок на форуме
Отправить личное сообщение для Positiv4eG Посмотреть профиль Найти все сообщения от Positiv4eG
 
Регистрация: 27.08.2010
Сообщений: 3

для этого нужно назначить каждому диву свой id к примеру slide1,slide2,slide3. потом узнавать какой из них есть visible, прятать его и открывать следующий.
Ответить с цитированием
  #7 (permalink)  
Старый 27.08.2010, 20:40
Новичок на форуме
Отправить личное сообщение для mdiimas Посмотреть профиль Найти все сообщения от mdiimas
 
Регистрация: 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, а при щелчке на ссылку не получается, подскажите что не так
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать такое fancy menu uonax Элементы интерфейса 2 22.05.2010 12:52
30(1|2) редирект от сервера. Или как лучше сделать редирект при верной отсылке форма. pizzZ AJAX и COMET 2 18.02.2010 09:06
Вопрос как сделать эту панельку Определённых размеров и свойств. jei jQuery 3 09.06.2009 19:14
Как сделать электронный каталог продукции? natarius Серверные языки и технологии 6 24.05.2009 20:56
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24