做一个带箭头的图片切换的效果，只用javascript和css来实现

效果像下面这个图

自已做的，功能有些不完善，多指教，代码如下：
<style type="text/css">
#scroll{ width:140px; height:210px; overflow:hidden;border:1px solid red;}
#scroll ul{ width:700px; height:210px; padding:0; margin:0; list-style:none;}
#scroll ul li{ width:138px; height:208px; float:left; border:1px solid yellow;}
#scroll ul li img{width:138px; height:208px;}

.container{ padding:0 60px; width:140px; position:relative;}
#left,#right{ width:50px; height:50px; position:absolute; top:80px; border:1px solid blue; cursor:pointer;}
#left{left:0px;}
#right{right:0px;}
</style>
<div class="container">
<div id="left"></div>
<div id="scroll">
<ul>
<li><img src="0.jpg" alt="0.jpg"></li>
<li><img src="1.jpg" alt="1.jpg"></li>
<li><img src="2.jpg" alt="2.jpg"></li>
<li><img src="3.jpg" alt="3.jpg"></li>
<li><img src="4.jpg" alt="4.jpg"></li>
</ul>
</div>
<div id="right"></div>
</div>
<script type="text/javascript">
var endscroll,T;
function scrol(direction,endscroll,step){
var obj1=document.getElementById("scroll");
if(direction=="right"){
if(obj1.scrollLeft<endscroll){ obj1.scrollLeft+=step; }
}
if(direction=="left"){
if(obj1.scrollLeft>endscroll){ obj1.scrollLeft-=step; }
}
}
function _scrol1(){ return scrol("right",endscroll,10);}
function _scrol2(){ return scrol("left",endscroll,10);}

document.getElementById("right").onclick=function(){
clearInterval(T);
endscroll=document.getElementById("scroll").scrollLeft+140;
T=setInterval("_scrol1()",1);
}
document.getElementById("left").onclick=function(){
clearInterval(T);
endscroll=document.getElementById("scroll").scrollLeft-140;
T=setInterval("_scrol2()",1);
}
</script>

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/sfvfmvmvp.html