Question

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

效果像下面这个图

Answer 1

自已做的，功能有些不完善，多指教，代码如下：
<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>

Answer 2

功能实现很简单，原理：只是给两边的箭头加上onclick事件，在事件里面改变图片的src路径就可以了，但是还有一个加个如果图片到了最后一张那么就循环显示，并且一般这样的效果还带自动轮换效果。如果需要这样的JS效果，请加：1534968714 验证信息时候请注明“百度知道” 可以和你相互学习。

Answer 3

去牛图库里找找吧，有狠多狠多这样的东西