从Javascript按钮单击消息CSS3转换

Question

我是CSS3过渡的新手.我正在尝试为webkit制作图像幻灯片.在宽DIV内有3个图像彼此相邻排列.这个宽DIV位于容器DIV中,其溢出属性已被设置为隐藏.容器DIV的宽度等于每个Image,因此用户一次只能看到一个图像.

这是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功能吗？非常感谢提前:)

Answer 1

明显的警告是，仅适用于 webkit 浏览器，您只需要使用

.style["-webkit-transform"] = ..

as-不能在内联属性名中使用：style.-webkit-transform