Ребята плз.Есть слайдер с кнопками и счётчиком.
Проблема вот в чём.При автоматической смене картинки счётчик добавляет +1,а при нажатии на кнопку в чём проблема?I
index.html
<!DOCTYPE html>
<html>
<head>
<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/ кто поможет буду очень благодарный
