Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.03.2016, 13:09
Интересующийся
Отправить личное сообщение для mr_kaznachey Посмотреть профиль Найти все сообщения от mr_kaznachey
 
Регистрация: 15.03.2016
Сообщений: 14

Проблема со слайдером
Ребята плз.Есть слайдер с кнопками и счётчиком.
Проблема вот в чём.При автоматической смене картинки счётчик добавляет +1,а при нажатии на кнопку в чём проблема?I

index.html
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>jQuery Fundamentals :: Home</title>
	<link href="css/reset.css" rel="stylesheet" type="text/css" media="all" />
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

	<style>
	#blog p.excerpt { display: none; }
	</style>

</head>

<body>
	<div id="header">
		<div id="logo" rel="logo"><a href="index.html">jQuery Fundamentals</a></div>
		<ul id="nav">
			<li class="selected"><a href="http://docs.jquery.com">jQuery Docs</a></li>
			<li><a href="sandbox.html">Sandbox</a></li>
			<li>Resources
				<ul>
					<li><a href="http://groups.google.com/group/jquery-en">Google Group</a></li>
					<li><a href="http://stackoverflow.com">Stack Overflow</a></li>
					<li><a href="http://delicious.com/rdmey/jquery-class">Delicious Bookmarks</a></li>
				</ul>
			</li>
		</ul>
	</div>

	<div id="main">
		<form id="search">
			<label for="q">Enter search term</label>
			<input type="text" name="q" class="input_text" />
			<input type="submit" value="Go" />
		</form>

		<h1>Eat here.</h1>
		<p>Lorem ipsum dolor sit amet, <a href="foo.html">consectetur adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

		<ul id="slideshow">
			<li>
				<h2 rel="yummy fruit!">Fruit</h2>
				<img src="images/fruit.jpg" alt="fruit" />
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</li>
			<li>
				<h2>Vegetables</h2>
				<img src="images/vegetable.jpg" alt="vegetables" />
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</li>
			<li>
				<h2>Bread</h2>
				<img src="images/bread.jpg" alt="bread" />
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</li>
		</ul>

		<ul id="myList">
			<li>List item 1</li>
			<li id="listItem_2" class="bar">List item 2</li>
			<li id="myListItem">List item 3</li>
			<li>List item 4</li>
			<li class="current bar">List item 5</li>
			<li>List item 6</li>
			<li>List item 7</li>
		</ul>

		<div class="module" id="blog">
			<h2>Blog</h2>
			<ul>
				<li>
					<h3><a href="blog.html#post1">Blog post 1</a></h3>
					<p class="excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</li>
				<li>
					<h3><a href="blog.html#post2">Blog post 2</a></h3>
					<p class="excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</li>
				<li>
					<h3><a href="blog.html#post3">Blog post 3</a></h3>
					<p class="excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</li>
			</ul>
		</div>

		<div class="module" id="specials">
			<h2>Specials</h2>
			<p>Choose the day of the week to see the specials:</p>
			<form action="specials.html" method="get">
				<ul>
					<li>
						<select name="day">
							<option value="" selected>Select</option>
							<option value="monday">Monday</option>
							<option value="tuesday">Tuesday</option>
							<option value="friday">Friday</option>
						</select>
					</li>
					<li class="buttons">
						<input type="submit" class="input_submit" value="Go" />
					</li>
				</ul>
			</form>
		</div>

		<table id="fruits">
			<thead>
				<tr>
					<th>Apples</th>
					<th>Oranges</th>
					<th>Pears</th>
					<th>Nectarines</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td id="myTableCell">2</td>
					<td>3</td>
					<td>4</td>
				</tr>
				<tr>
					<td>2</td>
					<td>6</td>
					<td>4</td>
					<td>8</td>
				</tr>
				<tr>
					<td>1</td>
					<td>7</td>
					<td>5</td>
					<td>3</td>
				</tr>
				<tr>
					<td>20</td>
					<td>30</td>
					<td>10</td>
					<td>100</td>
				</tr>
			</tbody>
		</table>


	</div>

<script src="libs/jquery-1.5.0.js"></script>
<script src="js/sandbox.js"></script>
<script src="js/hoverClass.js"></script>
<script src="js/navigation.js"></script>
<script src="js/blog.js"></script>
<script src="js/specials.js"></script>
<script src="js/slideshow.js"></script>
<script src="js/ions/inputHint.js"></script>
<script src="js/tabs.js"></script>
</body>
</html>


slider.js
$('h1').html('new html').attr()
$(document).ready(function() {
	var timeout, manualMode = false,
	
		$slideshow = $('#slideshow').prependTo('#main'),
	
		$counter = $('<div/>').insertAfter($slideshow),
		
		$controls = $('<div/>').insertAfter($slideshow),
		
		$prevBtn = $('<input/>', {
			type : 'button',
			value : 'previous'
		}).appendTo($controls),
		
		$nextBtn = $('<input/>', {
			type : 'button',
			value : 'next'
		}).appendTo($controls),
		
		$items = $slideshow.find('li').hide(),
		
		total = $items.length, 
		
		updateCounter = function(num) {
			$counter.text(num + ' of ' + total);
		},
		
		getItem = function($item, trav) {
			var $returnItem = $item[trav]();
			return $returnItem.length ? 
				$returnItem : 
				$items[(trav == 'next') ? 'first' : 'last']();
		},
		
		showItem = function($currentItem, $itemToShow) {
			var $itemToShow = 
				$itemToShow || getItem($currentItem,'next');
			
			$currentItem.fadeOut(500, function() {
				$itemToShow.fadeIn(500, fadeCallback);
			});
		},
		
		fadeCallback = function() {
			if (manualMode) { return; }

			var $this = $(this),
				$next = getItem($this, 'next'),
				num = $this.prevAll().length + 1;
			
			updateCounter(num);
				
			timeout = setTimeout(function() {
				showItem($this, $next);
			}, 1000);
		},
		
		handleBtnClick = function(e) {
			clearTimeout(timeout);

			manualMode = true;
			
			var $currentItem = $items.filter(':visible'),
				$itemToShow = getItem($currentItem, e.data.direction);
					
			showItem($currentItem, $itemToShow);
		};
		
	$prevBtn.bind('click', { direction : 'prev' }, handleBtnClick);
	$nextBtn.bind('click', { direction : 'next' }, handleBtnClick);
	
	$items.eq(0).fadeIn(500, fadeCallback);
});


P.S.Пример лежит на сайте http://sorax.tk/task/jq/ кто поможет буду очень благодарный
Ответить с цитированием
  #2 (permalink)  
Старый 15.03.2016, 14:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

mr_kaznachey,
а заменить jQuery JavaScript Library v1.5 на что - то поновее никак?
Ответить с цитированием
  #3 (permalink)  
Старый 15.03.2016, 14:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

mr_kaznachey,
slider.js
строка 1 зачем?
и строка 46 переместить в строку 53
Ответить с цитированием
  #4 (permalink)  
Старый 15.03.2016, 16:16
Интересующийся
Отправить личное сообщение для mr_kaznachey Посмотреть профиль Найти все сообщения от mr_kaznachey
 
Регистрация: 15.03.2016
Сообщений: 14

У меня такое задание и с такой либой.
То что ты написал не помагает.Но серавно спасибо
Ответить с цитированием
  #5 (permalink)  
Старый 15.03.2016, 16:22
Интересующийся
Отправить личное сообщение для mr_kaznachey Посмотреть профиль Найти все сообщения от mr_kaznachey
 
Регистрация: 15.03.2016
Сообщений: 14

Блин ступил.Всё получилось.ЧЕЛОВЕЧЕСКОЕ СПАИБО ТЕБЕ
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема со слайдером makc_mb Общие вопросы Javascript 0 07.12.2015 22:35
Проблема со слайдером FreeKill_84 Общие вопросы Javascript 2 18.08.2012 19:09
Проблема со слайдером через animate jamper jQuery 0 30.01.2012 16:36
Проблема с слайдером artem-kuzmin1991 Элементы интерфейса 3 28.07.2011 18:40
Проблема с слайдером artem-kuzmin1991 Events/DOM/Window 0 26.07.2011 09:38