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

html-css021

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

自已做的，功能有些不完善，多指教，代码如下：

<style type="text/css">

#scroll{ width:140pxheight:210pxoverflow:hiddenborder:1px solid red}

#scroll ul{ width:700pxheight:210pxpadding:0margin:0list-style:none}

#scroll ul li{ width:138pxheight:208pxfloat:leftborder:1px solid yellow}

#scroll ul li img{width:138pxheight:208px}

.container{ padding:0 60pxwidth:140pxposition:relative}

#left,#right{ width:50pxheight:50pxposition:absolutetop:80pxborder:1px solid bluecursor: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>

就用div加css就能做出这种效果了.给你一个刚写的例子。

<div style='background:redheight:20pxwidth:30pxdisplay: inline-block'></div>

<div style='top:5pxheight: 0pxborder: 15px red solidwidth: 20pxborder-top-color: transparentborder-right-color: transparentborder-bottom-color: transparentdisplay: inline-blockposition: relativeleft: -4px'></div>

CSS改变流动条的样式，代码如下：

scrollbar-face-color:#FEFAF1 (立体滚动条凸出部分的颜色) 

scrollbar-highlight-color:#FEFAF1 (滚动条空白部分的颜色) 

scrollbar-shadow-color:#FEFAF1 (立体滚动条阴影的颜色) 

scrollbar-arrow-color:#E6C3B9(上下按钮上三角箭头的颜色) 

scrollbar-base-color:#FEFAF1 (滚动条的基本颜色) 

scrollbar-darkshadow-color:#E6C3B9 (立体滚动条强阴影的颜色) 

scrollbar-3dlight-color:#E6C3B9(滚动条亮边的颜色) 

scrollbar-track-color:#FEFAF1} (滚动条的背景颜色)

CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。