Активировать преобразование CSS3 из Javascript нажмите кнопку

Я новичок в переходах CSS3. Я пытаюсь сделать слайд-шоу изображений только для webkit. есть 3 изображения, выровненных рядом друг с другом внутри широкого DIV. Этот широкий DIV находится внутри контейнера. Свойство переполнения DIV было установлено как скрытое. ширина контейнера DIV равна каждому изображению, поэтому пользователь может видеть только одно изображение за раз.

вот HTML и CSS для этого.

HTML

    <div id = "imageHolder">
        <div id="slide1_images">
            <img src="./images/fish.jpg" />
            <img src="./images/desert.jpg" />
            <img src="./images/space.jpg" />                    
        </div>          
    </div>

CSS

    #imageHolder
     {                     
       width: 320px;
       height: 240px;                       
       border: 1px solid grey;
       overflow: hidden;
       position: relative;                      
     }

    #slide1_images
     {                     
       position:absolute;
       left:0px;
       width:960px;
       -webkit-transition: -webkit-transform 0.5s;                      
     }

Теперь я добавил в код CSS-селектор наведения курсора, чтобы проверить переход. когда пользователь наводит курсор на изображение (если быть точным, внутренний DIV), весь набор перемещается влево на 320 пикселей (что является шириной каждого изображения).

CSS для наведения

    #slide1_images:hover
     {
       -webkit-transform:translate(-320px,0);
     }

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

Я хочу выполнить то же действие при нажатии кнопки Javascript. Я добавил на свою страницу кнопку btnNext. Как я могу запустить перевод из события нажатия кнопки? Я попробовал следующее, но это не сработало.

Javascript

    <script type = "text/javascript">
       function btnNext_clicked()
        {                   
          document.getElementById("slide1_images").style.-webkit-transform = "translate(-320px,0)"
        }
    </script> 

Я уверен, что наделал глупостей! не могли бы вы помочь мне исправить функцию Javascript? Заранее большое спасибо :)

5
задан Manas Saha 16 November 2011 в 10:45
поделиться