Переключатель картинок
Доброго времени суток. Я тут бьюсь над созданием блока с кучей картинок которые переключаются по клику. Вот что у меня вышло:
Сам блок, при нажатии на которые картинка переключается
<style>
.no { background: url(/images/001/01.png) no-repeat; background-position: center top; height: 1400px; cursor: pointer;}
</style>
<form method="post">
<input type="hidden" id="checkbox1" name="checkbox1" value="1">
</form>
<div class="no" id="div1" onclick="checked('div1', 'checkbox1', 'sel')"></div>
И скрипт к нему
<script language="JavaScript">
function checked (divs, box, sel)
{
var val = document.getElementById (box).value * 1 + 1 ;
if(document.getElementById (box).value<9)
{
document.getElementById (divs).style.background = "url('/images/001/0" + val + ".png') no-repeat center top ";
document.getElementById (box).value = val;
document.getElementById (sel).value = val;
}
else
{
document.getElementById (divs).style.background = "url('/images/001/" + val + ".png') no-repeat center top ";
document.getElementById (box).value = val;
document.getElementById (sel).value = val;
}}
</script>
И у меня еще есть выпадающая менюшка:
<select id="sel" name="sel" title="Номер страницы" style="width: 100px;"><option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
Так вот у меня не получилось сделать чтобы при нажатии на пункты этой менюхи картинка переключалась на нужную. И не получилось сделать кнопку "предыдущая картинка" Помогите дописать, а то я уже не знаю как быть |
ничего не понятно
|
festerod, сделай полный тестовый пример а не куски какие-то...
|
Вот изваял... На самом деле я тоже совсем недавно начал изучать JS и единственное на что меня хватило так это на:
<html>
<head>
<style>
#Picture {
background-image:url(../img/1.jpg);
background-color: black;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<select id="select1">
<option value="1">First Picture</option>
<option value="2">Second Picture</option>
<option value="3">Third Picture</option>
<option value="4">Fourth Picture</option>
</select>
<input id="button1" type="button" value="Next"/>
<input id="button2" type="button" value="Previous"/>
<div id="Picture"></div>
<script type="text/javascript">
document.getElementById('button1').onclick = function(){
var k = document.getElementById('select1').value;
if (document.getElementById('select1').value < 4) {
k++;
document.getElementById('Picture').style.backgroundImage = "url(../img/" +k+".jpg)";
document.getElementById('select1').value++;
};
};
document.getElementById('button2').onclick = function(){
var k = document.getElementById('select1').value;
if (document.getElementById('select1').value > 1) {
k--;
document.getElementById('Picture').style.backgroundImage = "url(../img/" +k+".jpg)";
document.getElementById('select1').value--;
};
};
document.getElementById('select1').onchange = function(){
var k = document.getElementById('select1').value;
document.getElementById('Picture').style.backgroundImage = "url(../img/" +k+".jpg)";
}
</script>
</body>
</html>
Собственно, функции вроде как понятно что делают... |
Soul D Esire,
спасибо, это почти то что надо, только не подскажешь как сделать чтобы картинка была не фоном и при клике на нее она переключалась на следующую |
Ну можно оставить картинку в <div> и навесить на блок событие, например, на клик мыши. Что-то типа:
document.getElementById('Picture').onclick = function(){
var k = document.getElementById('select1').value;
if (document.getElementById('select1').value < 4) {
k++;
document.getElementById('Picture').style.backgroundImage = "url(../img/" +k+".jpg)";
document.getElementById('select1').value++;
} else {
document.getElementById('Picture').style.backgroundImage = "url(../img/" +1+".jpg)";
document.getElementById('select1').value = 1;
}
};
Сорри, если есть косяки в коде... Пишу без возможности проверить, что я пишу)) но вроде должно работать... |
Soul D Esire, в js есть такая арифметическая операция как % (Модуль числа). Так вот она ооочень удобна для таких случаев. Твой пример примет вид
document.getElementById('Picture').onclick = function(){
var k = document.getElementById('select1').value;
k = parseInt(k);
k++;
k = k%4;
k = (k==0)? 1: k;
document.getElementById('Picture').style.backgroundImage = "url(../img/" +k+".jpg)";
document.getElementById('select1').value=k;
};
Цитата:
|
Угу, понял) Стало красивее и изящнее) Только вот % - это вроде как остаток от целочисленного деления, а не модуль)
|
Цитата:
http://javascript.ru/arithmetic В институте мне его давали как "деление по модулю". |
Ну для меня запись -7%2 = -(7%2) = -(1) = -1... Тот же унарный минус, навешанный на целочисленное деление...
Для мя модуль = это функция abs() из библиотеки Math)) |
| Часовой пояс GMT +3, время: 11:38. |