Форум

qwe88 · #1 (**permalink**) 12.06.2015, 01:05

Добрый день!
Учусь писать элементарную карусель.
Все работает как надо, только при прокрутке карусели заново, приходится нажать два раза кнопку, что бы она начала прокрутку.
Помогите, пожалуйста, сильно застрял и не могу понять в чем дело.

<style>
    #naspi li{
        display: inline-block;
        width:  200px;
        height:  100px;
        background-color: #000;
        margin: 20px;
        color: #fff;
        -webkit-transition: all 1s;
        -ms-transition: all 1s;
        -o-transition: all 1s;
        -moz-transition: all 1s;
        transition: all 1s;
        margin-left: 0;

    }

    #naspi{
        width: 800px;
        overflow: hidden;
        height: 100px;
    }

    ul {
        margin: 0;
        padding: 0;
    }
</style>


<ul id="naspi">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<div onclick="vlev()">Влево</div>
<br>


<br>
<div id="cifr">0</div>

<script>
    var spis = document.getElementById("naspi");
    var skoka = spis.getElementsByTagName("li");

    var vnut = Number(document.getElementById("cifr").innerHTML);
    var vnutnc = document.getElementById("cifr");


    function vlev(){
        var cifogr = vnutnc.innerHTML;
        vnut = vnut + 1;
        vnutnc.innerHTML = vnut;

        if(vnut >= skoka.length - 3){
            vnut = -1;

            for(i=0; i<=skoka.length; i++){
                skoka[i].style.marginLeft = "0";
            }
        }


        skoka[cifogr].style.marginLeft = "-225px";
    }
</script>

caetus · #2 (**permalink**) 12.06.2015, 01:14

у меня все заработало локально когда изменил for(i=0; i<=skoka.length; i++) на for(i=0; i<=skoka.length-1; i++)

qwe88 · #3 (**permalink**) 12.06.2015, 01:18

Спасибо, но проблема же осталась. После возвращения всех кадров, приходится 2 раза нажать на кнопку для продолжения.
У меня и локально не работает. Смотрел в FF

caetus · #4 (**permalink**) 12.06.2015, 01:36

vnutnc.innerHTML = vnut;
постав на в самом конце функции

qwe88 · #5 (**permalink**) 12.06.2015, 01:41

Не помогло

caetus · #6 (**permalink**) 12.06.2015, 02:26

раз 10 перепроверил , вроде работает

<style>
     li{
        display: inline-block;
        width:  200px;
        height:  100px;
        background: #000;
        margin: 20px;
        color: #fff;
        -webkit-transition: all 1s;
        -ms-transition: all 1s;
        -o-transition: all 1s;
        -moz-transition: all 1s;
        transition: all 1s;
        margin-left: 0;

    }
    ul li:nth-child(odd){
      background: red;
     }

    #naspi{
        width: 800px;
        overflow: hidden;
        height: 100px;
    }

    ul {
        margin: 0;
        padding: 0;
    }
</style>
</head>
<body>
	


<ul id="naspi">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<div onclick="vlev()">Влево</div>
<br>


<br>
<div id="cifr">0</div>

<script>
    var spis = document.getElementById("naspi");
    var skoka = spis.getElementsByTagName("li");

    var vnut = Number(document.getElementById("cifr").innerHTML);
    var vnutnc = document.getElementById("cifr");


    function vlev(){
    	var cifogr = vnutnc.innerHTML;
         
         vnut = vnut + 1;
        
        
        
skoka[cifogr].style.marginLeft = "-225px";

        if(vnut >= skoka.length - 2){
        	console.log(vnut)
            vnut =  0;
            console.log(vnut)

            for(i=0; i<=skoka.length-1; i++){
                skoka[i].style.marginLeft = "0";
            }
        }

vnutnc.innerHTML = vnut;
 
        
        
    }
</script>

qwe88 · #7 (**permalink**) 12.06.2015, 12:54

Спасибо огромное!!
А то я уже всю голову сломал

Форум

Справочник

Discord чат

Курсы javascript