点击CSS3转换Javascript按钮

Question

我是CSS3过渡的新手。我试图使一个图像幻灯片仅为webkit。在一个宽DIV中有3个图像彼此相邻对齐。这个宽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像素(这是每个图像的宽度)。

hover

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

Answer 2

在JavaScript中可以这样访问-webkit-transform属性:

var style = document.getElementById("slide1_images").style;
style.webkitTransform ='translateX(-320px)';

您可以通过访问以下属性使其跨浏览器友好:

transform
webkitTransform
MozTransform
OTransform
msTransform