Форум

festerod · #1 (**permalink**) 01.02.2011, 01:08

Доброго времени суток. Я тут бьюсь над созданием блока с кучей картинок которые переключаются по клику. Вот что у меня вышло:
Сам блок, при нажатии на которые картинка переключается

<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>

Так вот у меня не получилось сделать чтобы при нажатии на пункты этой менюхи картинка переключалась на нужную. И не получилось сделать кнопку "предыдущая картинка"
Помогите дописать, а то я уже не знаю как быть

softovik88 · #2 (**permalink**) 01.02.2011, 09:39

ничего не понятно

ksa · #3 (**permalink**) 01.02.2011, 09:44

festerod, сделай полный тестовый пример а не куски какие-то...

Soul D Esire · #4 (**permalink**) 01.02.2011, 14:59

Вот изваял... На самом деле я тоже совсем недавно начал изучать 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>

Собственно, функции вроде как понятно что делают...

festerod · #5 (**permalink**) 01.02.2011, 16:02

Soul D Esire,
спасибо, это почти то что надо, только не подскажешь как сделать чтобы картинка была не фоном и при клике на нее она переключалась на следующую

Soul D Esire · #6 (**permalink**) 02.02.2011, 09:28

Ну можно оставить картинку в <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;
            }
        };

Сорри, если есть косяки в коде... Пишу без возможности проверить, что я пишу)) но вроде должно работать...

ksa · #7 (**permalink**) 02.02.2011, 10:51

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;
        };

Сообщение от Soul D Esire

Пишу без возможности проверить, что я пишу

Я также не проверял... Но думаю что идея понятна.

Soul D Esire · #8 (**permalink**) 02.02.2011, 13:45

Угу, понял) Стало красивее и изящнее) Только вот % - это вроде как остаток от целочисленного деления, а не модуль)

ksa · #9 (**permalink**) 02.02.2011, 14:18

Сообщение от Soul D Esire

Только вот % - это вроде как остаток от целочисленного деления, а не модуль

Я скопировал как тут написали
http://javascript.ru/arithmetic

В институте мне его давали как "деление по модулю".

Soul D Esire · #10 (**permalink**) 02.02.2011, 14:23

Ну для меня запись -7%2 = -(7%2) = -(1) = -1... Тот же унарный минус, навешанный на целочисленное деление...
Для мя модуль = это функция abs() из библиотеки Math))

Форум

Справочник

Discord чат

Курсы javascript