Въпрос за слайдер

[Dizasterr]

Здравейте! Пробвам се да си направя слайдер на снимки сам. Проблемът, че не мога да се сетя кои функции да използвам. Мисля, че най - лесно ще стане с jQuery. Не искам да ми давате линкове към готови или кодове. Просто, ако някой може да ми помогне с функциите.

 

[misho]

Не съм много навътре в jQuery, но мисля, че тези уроци може да са ти от полза. Описани са някои от функциите. :wink:

 

[Dizasterr]

Сетих се за един начин, но не съм сигурен, че ще стане. Написах следния код, но квадрата не се анимира:

<html>
<head>
<title>Слайдер на проектите</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link type="text/css" href="styles.css" media="screen" rel="stylesheet" />
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
		$(function() {
		$("#button").click(function(){
		  $("#pictureone").animate({"left": "+=50px"}, "slow");
		});
		}
</script>
	<style type="text/css">
		#slider {
			width: 106px;
			heigth: 100px;
			background: #FFF;
			color: #000;
		}
	</style>
</head>
<body>
<center>
<br/><br/><br/>
<div id="slider">
<table>
<tr>
<td>
<div id="pictureone" style="width: 100px; height: 100px; background: #FF0000;"></div>
</td>
<td></td>
<td>
<div id="picturetwo" style="width: 100px; height: 100px; background: #00FF00;"></div>
</td>
<td></td>
<td>
<div id="picturethree" style="width: 100px; height: 100px; background: #0000FF;"></div>
</td>
</tr>
</table>
</div>
<br/><br/><br/>
<div id="button" onclick="nextpic()" style="background-color: #FFF; color: #000; width: 100px;">
Следващ
</div>
<input type="submit" onclick="nextpic()" name="submit" id="submit" value="Next" />
</body>
</html>

 

[Dizasterr]

Някой може ли да каже защо горния код не работи ?

 

[marian]

<html>
<head>
<title>Слайдер на проектите</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link type="text/css" href="styles.css" media="screen" rel="stylesheet" />
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#button_next").click(function(){
$("#slider table").animate({"left": "+=50px"}, "slow");
});
$("#button_back").click(function(){
$("#slider table").animate({"left": "-=50px"}, "slow");
});
});
</script>
<style type="text/css">
#slider {
width: 106px;
heigth: 100px;
background: #FFF;
color: #000;
}
</style>
</head>
<body>
<center>
<br/><br/><br/>
<div id="slider" style="overflow:hidden;">
<table style="position:relative;">
<tr>
<td>
<div id="pictureone" style="width: 100px; height: 100px; background: #FF0000;"></div>
</td>
<td></td>
<td>
<div id="picturetwo" style="width: 100px; height: 100px; background: #00FF00;"></div>
</td>
<td></td>
<td>
<div id="picturethree" style="width: 100px; height: 100px; background: #0000FF;"></div>
</td>
</tr>
</table>
</div>
<br/><br/><br/>
<span id="button_back" style="background-color: #FFF; color: #000; width: 100px;">Предишен</span>
<span id="button_next" style="background-color: #FFF; color: #000; width: 100px;">Следващ</span>
</body>
</html>

 

[Dizasterr]

<html>
<head>
<title>Слайдер на проектите</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link type="text/css" href="styles.css" media="screen" rel="stylesheet" />
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#button_next").click(function(){
$("#slider table").animate({"left": "+=50px"}, "slow");
});
$("#button_back").click(function(){
$("#slider table").animate({"left": "-=50px"}, "slow");
});
});
</script>
<style type="text/css">
#slider {
width: 106px;
heigth: 100px;
background: #FFF;
color: #000;
}
</style>
</head>
<body>
<center>
<br/><br/><br/>
<div id="slider" style="overflow:hidden;">
<table style="position:relative;">
<tr>
<td>
<div id="pictureone" style="width: 100px; height: 100px; background: #FF0000;"></div>
</td>
<td></td>
<td>
<div id="picturetwo" style="width: 100px; height: 100px; background: #00FF00;"></div>
</td>
<td></td>
<td>
<div id="picturethree" style="width: 100px; height: 100px; background: #0000FF;"></div>
</td>
</tr>
</table>
</div>
<br/><br/><br/>
<span id="button_back" style="background-color: #FFF; color: #000; width: 100px;">Предишен</span>
<span id="button_next" style="background-color: #FFF; color: #000; width: 100px;">Следващ</span>
</body>
</html>

Не исках код, но все пак работи +1 . :?: