Jquery событие Click - JavaScript, Ajax

Shmblra · 11.01.2011, 23:31

Доброго времени суток.
Столкнулся с проблемой следующего порядка, моя задача состоит в том, чтобы написать функцию, которая бы сменяла изображения по клику.
Все бы ничего, когда картинок всего 2, раз кликнул и картинка сменилась, НО, меня это мало устраивает, предположим я имею 5 или 10 картинок и на сайте у меня всего навсего маленький участок под <div>Картинка</div> и я хочу при клике там происходила смена картинок, при каждом клике своя картинка, и как только картинки заканчивались в папке с картинками, то при последнем клике Картинка сменялась на начальную и так в цикле по кругу.
Я написал код в частном случае И то, у меня картинка меняется но в обратку не переходит.
Буду рад, если кто то поможет с кодом или хотя бы объяснит как это сделать.
Вот мой код :

var myClick = function(state,clickState){
var state = 'images/slider/' + state;
var clickState = 'images/slider/' + clickState;

var a = $('#slider img[src*="' + state + '"]');

a.click(function(){
$(this).attr('src', clickState);
});
}
myClick('moto1.jpg','moto2.jpg');

Greblin · 12.01.2011, 00:22

Если для каждой странички число картинок заранее известно, то можно сделать так:

Код:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var i = 1;
function MyClick() {
  i = i % 5 + 1; //всего 5 картинок
  $("#img").attr("src", i + ".jpg");
}
</script>
</head>
<body>
<img id="img" src="1.jpg" onclick="MyClick()" />
</body>
</html>

А вот если количество картинок будет меняться, то без PHP или ещё чего-нибудь серверного Вам не обойтись

Shmblra · 12.01.2011, 09:28

Большое спасибо, попробую разобраться)

Я Приверженец того, чтобы код находился в отдельном файле и столкнулся с проблемой адаптации Вашего кода.
Ваш код проверил, работает без сбоев. После переноса его в отдельный файл и небольшого изменения, функция срабатывает всего 1 раз,как ее зациклить?... помогите разобраться.

Вот код:
$(function(){
var i = 1;
function MyClick() {
i = i % 5 + 1; //всего 5 картинок
$('#img').click(function(){
$(this).attr("src", i + ".jpg");
});
}
MyClick();

});

Отредактировал свое сообщение чтобы не создавать новое и не засорять форум.
Сам не знаю как пришел, но изменил изначальный скрипт который написал Greblin и получилась функция следующая:

$(function(){
var i = 1;

function MyClick() {
$('#img').click(function(){clicMy ();});
}

function clicMy () {
i = i % 5 + 1; //всего 5 картинок
$('#img').attr("src", "images/moto" + i + ".jpg");
}

MyClick();

});
Все картинки имеют имена для большего разъяснения Moto1 Moto2 Moto3 Moto4 .jpg

Огромное спасибо, что помогли развить мою мысль

11.01.2011, 23:31	#1
Shmblra Регистрация: 11.01.2011 Сообщений: 6	Jquery событие Click Доброго времени суток. Столкнулся с проблемой следующего порядка, моя задача состоит в том, чтобы написать функцию, которая бы сменяла изображения по клику. Все бы ничего, когда картинок всего 2, раз кликнул и картинка сменилась, НО, меня это мало устраивает, предположим я имею 5 или 10 картинок и на сайте у меня всего навсего маленький участок под <div>Картинка</div> и я хочу при клике там происходила смена картинок, при каждом клике своя картинка, и как только картинки заканчивались в папке с картинками, то при последнем клике Картинка сменялась на начальную и так в цикле по кругу. Я написал код в частном случае И то, у меня картинка меняется но в обратку не переходит. Буду рад, если кто то поможет с кодом или хотя бы объяснит как это сделать. Вот мой код : var myClick = function(state,clickState){ var state = 'images/slider/' + state; var clickState = 'images/slider/' + clickState; var a = $('#slider img[src*="' + state + '"]'); a.click(function(){ $(this).attr('src', clickState); }); } myClick('moto1.jpg','moto2.jpg');

12.01.2011, 00:22	#2
Greblin Меркантильный кю Участник клуба Регистрация: 02.02.2008 Сообщений: 1,001	Если для каждой странички число картинок заранее известно, то можно сделать так: Код: `<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var i = 1; function MyClick() { i = i % 5 + 1; //всего 5 картинок $("#img").attr("src", i + ".jpg"); } </script> </head> <body> <img id="img" src="1.jpg" onclick="MyClick()" /> </body> </html>` А вот если количество картинок будет меняться, то без PHP или ещё чего-нибудь серверного Вам не обойтись Росли вроде умными, выросли дурнями... (c)А.Васильев

12.01.2011, 09:28	#3
Shmblra Регистрация: 11.01.2011 Сообщений: 6	Большое спасибо, попробую разобраться) Я Приверженец того, чтобы код находился в отдельном файле и столкнулся с проблемой адаптации Вашего кода. Ваш код проверил, работает без сбоев. После переноса его в отдельный файл и небольшого изменения, функция срабатывает всего 1 раз,как ее зациклить?... помогите разобраться. Вот код: $(function(){ var i = 1; function MyClick() { i = i % 5 + 1; //всего 5 картинок $('#img').click(function(){ $(this).attr("src", i + ".jpg"); }); } MyClick(); }); Отредактировал свое сообщение чтобы не создавать новое и не засорять форум. Сам не знаю как пришел, но изменил изначальный скрипт который написал Greblin и получилась функция следующая: $(function(){ var i = 1; function MyClick() { $('#img').click(function(){clicMy ();}); } function clicMy () { i = i % 5 + 1; //всего 5 картинок $('#img').attr("src", "images/moto" + i + ".jpg"); } MyClick(); }); Все картинки имеют имена для большего разъяснения Moto1 Moto2 Moto3 Moto4 .jpg Огромное спасибо, что помогли развить мою мысль Последний раз редактировалось Shmblra; 12.01.2011 в 10:29.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
событие click в commandbutton	gsg	Microsoft Office Excel	2	20.10.2010 15:40
Создал кнопку в чужой форме.Как обработать событие Click	Goldz60	Win Api	8	11.06.2010 08:46
right click menu	tyrus2	Microsoft Office Word	1	18.04.2010 16:27
Click Shot	Alex Cones	Софт	9	18.04.2010 10:31
Событие click по заголовку формы?	Polotenchik	Общие вопросы Delphi	3	24.06.2009 12:48