1、在html编辑器软件内，新建html页面，（一般我们常使用的两款编辑器是HBuilder和Adobe Dreamweaver，这里我使用的软件是HBuilder）。
2、在<body></body>添加<div class="nav"></div>,于<div class="nav"></div>中间添加<ul></ul>,在<ul>内添加<li>标签，<li>内同时添加<a>标签，方便连接导航跳转。
3、在新建的<a></a>内，添加横向导航要显示的内容。
4、在<title></title>下方添加一个<style type="text/css"></style>。
5、源文件html保存后，使用浏览器打开预览效果。
要用JS来控制的，单纯的CSS做不到，给你个代码，可以直接拿去用：
<div id="dpro" style="overflow:hiddenwidth:100%px padding:10px margin:0 10px"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="dpro1">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div class="index_pic"><a href="product_show.asp?id=41" title="轻轮"><img src="UploadFiles/20131017164757151.png" width="148" height="139" /><span>轻轮</span></a></div></td>
<td><div class="index_pic"><a href="product_show.asp?id=40" title="轻轮"><img src="UploadFiles/20131017164724200.png" width="148" height="139" /><span>轻轮</span></a></div></td>
<td><div class="index_pic"><a href="product_show.asp?id=39" title="SB-6509-948 "><img src="UploadFiles/2013101716460566.png" width="148" height="139" /><span>SB-6509-948 </span></a></div></td>
<td><div class="index_pic"><a href="product_show.asp?id=38" title="CPT-5854-85BRK4 "><img src="UploadFiles/20131017164529355.png" width="148" height="139" /><span>CPT-5854-85BRK4 …</span></a></div></td>
<td><div class="index_pic"><a href="product_show.asp?id=37" title="CPT-4856-85BRK4 "><img src="UploadFiles/20131017164455666.png" width="148" height="139" /><span>CPT-4856-85BRK4 …</span></a></div></td>
<td><div class="index_pic"><a href="product_show.asp?id=36" title="CPT-5851-85BRK4 "><img src="UploadFiles/20131017164420861.png" width="148" height="139" /><span>CPT-5851-85BRK4 …</span></a></div></td>
<td><div class="index_pic"><a href="product_show.asp?id=35" title="医用脚轮"><img src="UploadFiles/20131017164359417.png" width="148" height="139" /><span>医用脚轮</span></a></div></td>
<td><div class="index_pic"><a href="product_show.asp?id=34" title="轻轮"><img src="UploadFiles/20131017164322134.jpg" width="148" height="139" /><span>轻轮</span></a></div></td>
<td><div class="index_pic"><a href="product_show.asp?id=33" title="京华小叶花"><img src="UploadFiles/20139281463567.jpg" width="148" height="139" /><span>京华小叶花</span></a></div></td>
</tr>
</table>
</td>
<td id="dpro2">  </td>
</tr>
</table>
</div>
<!-- pro end -->
<script language="javascript">
var ddp = document
var dpro = ddp.getElementById("dpro")
var dpro1 = ddp.getElementById("dpro1")
var dpro2 = ddp.getElementById("dpro2")
var dspeed=5 //滚动的速度,数值越大越慢
dpro2.innerHTML=dpro1.innerHTML
function Marquee()
{
if(dpro2.offsetWidth-dpro.scrollLeft<=0)
{
dpro.scrollLeft-=dpro1.offsetWidth
}
else
{
dpro.scrollLeft++
}
}
var MyMar=setInterval("Marquee()",dspeed)
dpro.onmouseover=function()
{
clearInterval(MyMar)
}
dpro.onmouseout=function()
{
MyMar=setInterval("Marquee()",dspeed)
}
</script>
js写的 http://www.lanrentuku.com/js/d985.zip使用方法：
1、依次引入slideshow.css与slideshow.js文件；
2、将代码复制到页面中即可。
3、可在代码中的SlideShow( )括号中设置切换图片的时间间隔，默认为3000。
百度JS下载 找一些下载站 可以找到各种各项的JS特效
