通过js修改外联样式的left属性值实现轮播效果失败

[microarea]

大家都用什么方法实现轮播图？这两天仿写了一个网站，html页面的样式都是引入的外联样式，结过用js获取元素后，通过修改元素的left值来实现轮播怎么也实现不了，在网上找了很久相关的知识也没弄明白到底怎么纠正，只弄明白了可以用currentStyle/getComputedStyle来获取外联样式，但好像只能获取不能修改。难道要把样式都写到行间或页面头部去吗？有没有路过的大神帮忙指点迷津，非常感谢！！！
代码部分：
HTML：
<!--主体头部 中间轮播-->
<section id="wrapper" class="middle position_absolute">
<!--四张大图-->
<ul class="clearfix">
<li>
<a href="#">
<img src="img/ad1.jpg"/>
</a>
</li>
<li>
<a href="#">
<img src="img/ad2.jpg"/>
</a>
</li>
<li>
<a href="#">
<img src="img/ad3.jpg"/>
</a>
</li>
<li>
<a href="#">
<img src="img/ad4.jpg"/>
</a>
</li>
</ul>
<!--四个圆按钮-->
<ul class="clearfix">
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
</ul>
</section>

css样式，单独写在index.css里然后引入到HTML页面去的：
/*四张大图*/
section.middle ul:first-child{
width: 400%;
height: 100%;
top: 0;
left: 0;
background: #6f42c1;
}
section.middle>ul:first-child>li{
width: 25%;
height: 100%;
float: left;
}
section.middle>ul:first-child img{
width: 100%;
}
/*轮播图下方四个圆点*/
section.middle>ul:nth-child(2){
position: absolute;
bottom: 15px;
left: 340px;
}
section.middle>ul:nth-child(2) li{
float: left;
margin-left: 12px;
}
section.middle>ul:nth-child(2) a{
display: block;
width: 8px;
height: 8px;
background: #666;
border-radius: 50%;
}
js代码：
window.onload = function(){
//获取轮播图的相框
var showImg = document.getElementById('wrapper');
//获取装四张轮播图的ul
var imgUl = showImg.getElementsByTagName('ul')[0];
//定义轮播方法
function move(){
if(imgUl.currentStyle){
imgUl.currentStyle.left = imgUl.offsetLeft - 760 + 'px';
}else{
getComputedStyle(imgUl,null).left = imgUl.offsetLeft - 760 + 'px';
}
}
setInterval(move, 1000);
}

[天际的海浪]

只有元素设置了position: absolute。修改left或top才会有效

css:
section.middle{
width: 760px;
height: 400px;
overflow: hidden;
position: relative;
}
section.middle ul:first-child{
position: absolute;
width: 400%;
height: 100%;
top: 0;
left: 0;
background: #6f42c1;
}
js:
imgUl.style.left = imgUl.offsetLeft - 760 + 'px';

[microarea]

这样还是无法实现，关键是我css样式是单独的一个文件，然后再用link引入到轮播图页面里的，难道要直接把样式写到轮播图页面里吗？但一般不都推荐结构、行为、样式分开写吗？

[天际的海浪]

引用 2 楼 microarea 的回复:

这样还是无法实现，关键是我css样式是单独的一个文件，然后再用link引入到轮播图页面里的，难道要直接把样式写到轮播图页面里吗？但一般不都推荐结构、行为、样式分开写吗？

css样式单独的一个文件用link引入和直接写<style type="text/css"></style>里是没有任何区别的。
js是

window.onload = function(){
    //获取轮播图的相框
    var showImg = document.getElementById('wrapper');
    //获取装四张轮播图的ul
    var imgUl = showImg.getElementsByTagName('ul')[0];
    //定义轮播方法
    function move(){
        imgUl.style.left = imgUl.offsetLeft - 760 + 'px';
    }
    setInterval(move, 1000);
}

[天际的海浪]

css

section.middle{
    width: 760px;
    height: 400px;
    overflow: hidden;
    position: relative;
}
section.middle ul:first-child{
	position: absolute;
	list-style-type: none;
	margin: 0;
	padding: 0;
    width: 400%;
    height: 100%;
    top: 0;
    left: 0;
    background: #6f42c1;
}
section.middle>ul:first-child>li{
    width: 25%;
    height: 100%;
    float: left;
}
section.middle>ul:first-child img{
    width: 100%;
}
/*轮播图下方四个圆点*/
section.middle>ul:nth-child(2){
    position: absolute;
    bottom: 15px;
    left: 340px;
}
section.middle>ul:nth-child(2) li{
    float: left;
    margin-left: 12px;
}
section.middle>ul:nth-child(2) a{
    display: block;
    width: 8px;
    height: 8px;
    background: #666;
    border-radius: 50%;
}

[microarea]

有效果了，谢谢亲的耐心讲解，好人一生平安