求图片左右切换js

http://movie.youku.com/
我想要上面那个网站的效果,一次一组图片切换带左右按钮还有下面的4个选项钮,哪位大哥给个代码参考下啊

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

拿去
http://www.csrcode.cn/html/txdm/txtx/3301.htm
http://www.wangjie.org/  这个上面有不少我们需要的模板，自己去找找！！！
其实这也类似
http://www.veryhuo.com/a/view/45140.html
http://www.zurb.com/playground/jquery_image_slider_plugin http://workshop.rs/projects/coin-slider/http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title><style>
#focus_img {
background:url(../images/img_car_top.png) no-repeat scroll 0 0 transparent; float: left;height: 170px; overflow: hidden;padding: 3px 0 0 4px; position: relative;  width: 967px;  z-index: 1;
}#focus_warp {

}
#au {
filter: progid:dximagetransform.microsoft.fade ( duration=0.5,overlap=1.0 )
}
#au img {
filter: progid:dximagetransform.microsoft.fade ( duration=0.5,overlap=1.0 );
}
#simg img {}.undis {
display: none
}</style>
<script>
function getid(obj)//取对应id的元素
  {
return document.getElementById(obj);
  } function getNames(obj,name,tij)//取obj元素下标签为tij的元素并要求满足name属性=name;返回一个数组
{
var p = getid(obj);
var plist = p.getElementsByTagName(tij);
var rlist = new Array();
for(i=0;i<plist.length;i++)
{
if(plist[i].getAttribute("name") == name)
{
rlist[rlist.length] = plist[i];
}
}
return rlist;
} function ri(obj)//取得对应的小图列表中当前元素对应的序号
{
var p = getid("simg").getElementsByTagName("td");
for(i=0;i<p.length;i++)
{
if(obj == p[i])
{
return i;
}
}
} function ci(obj)//小图选择框的处理函数
{
var p = getid("simg").getElementsByTagName("td");
for(i=0;i<p.length;i++)
{
if(obj ==p[i])
{
p[i].className ="s";
}
else
{
p[i].className ="";
}
}
}
function fiterplay(obj,num,t,name)//类似页卡的函数.设置对应内容的隐藏和显示 obj:元素的id  name:元素对应的name属性的值, t:对应内容的标签 num:当前选择的元素的序号
{
var fitlist = getNames(obj,name,t);
for(i=0;i<fitlist.length;i++)
{ if(i == num)
{
fitlist[i].className = "dis";
}
else
{
fitlist[i].className = "undis";
}
}
}


function play(obj,n1)//播放的函数
{
var p = obj.parentNode.parentNode.getElementsByTagName("img");
var au = getid(n1);
var num = ri(obj);
try //ie下的处理部分
{
with(au)
{
filters[0].Apply(); //接收滤镜
ci(obj); //变幻小图的选择.可以放在try以外.
fiterplay(n1,num,"div","f");//设置滤镜中对应部分的显示和隐藏
filters[0].play(); //播放滤镜
}
}
catch(e)//ff下的处理部分
{
ci(obj);
fiterplay(n1,num,"div","f");
}
}
var n=0;
function clearAuto() {clearInterval(autoStart);};
function setAuto(){autoStart=setInterval("auto(n)", 4000)}
function auto()
{
var x = getid("simg").getElementsByTagName("td");
n++;
if(n>3)n=0;
play(x[n],"au");
}
function tabs_z(o,n){
var m_n = document.getElementById(o).getElementsByTagName("em");
var c_n = document.getElementById(o).getElementsByTagName("ol");
for(i=0;i<m_n.length;i++){
m_n[i].className=i==n?"tab_on":"";
c_n[i].style.display=i==n?"block":"none";
}
}
</script>
</head><body><div id="focus_img" style="height:auto">
<table id="focus_warp" cellspacing="0" cellpadding="0" width="963px"  border=0>
  <tbody>
  <tr>
    <td>
      <div id="au" style="width:963px;height:169px">
      <div class="dis" name="f"><a href=""><img height="169px" alt=""  src="../images/register.png" width="963px">1</a></div>
      <div class="undis" name="f"><a href="" ><img height="169px" alt="" src="../images/pick_ride_2.png"width="963px">2</a></div>
      <div class="undis" name="f"><a  href="" ><img height="169px" alt="" src="../images/register.png" width="963px">3</a></div>
      <div class="undis" name="f"><a href="" ><img height="169px" alt="" src="../images/pick_ride_2.png" width="963px">4</a></div>
   <div class="undis" name="f"><a  href="" ><img height="169px" alt="" src="../images/register.png" width="963px">5</a></div>
  </div>
   </td>
  </tr>
  <div style="clear:both"></div>
  <tr  class="car_btm" style="margin-left:-4px">
    <td>
      <table id="simg" cellspacing="0" cellpadding="0" border="0" >
        <tbody>
        <tr>
          <td class="carousel-jumper" onmouseover="javascript:play(this,'au');" style="width:166px;line-height:36px;padding-left:21px"><a href="#">一起来吧! ! !</a></td>
          <td class="carousel-jumper" onmouseover="javascript:play(this,'au');" style="width:166px;line-height:36px;padding-left:21px"><a href="#">一日游</a></td>
          <td class="carousel-jumper" onmouseover="javascript:play(this,'au');" style="width:166px;line-height:36px;padding-left:21px"><a href="#">工作原理</a></td>
          <td class="carousel-jumper" onmouseover="javascript:play(this,'au');" style="width:166px;line-height:36px;padding-left:21px"><a href="#">一日游</a></td>
  <td class="carousel-jumper" onmouseover="javascript:play(this,'au');" style="width:166px;line-height:36px;padding-left:21px"><a href="#">选择你的工具</a></td>
</tr>
</tbody>
</table>
</td>
  </tr>
  </tbody>
</table>
</div>
</body>
</html>
样式图片js自己整理
找找jquery的图片插件，看看看是不是有你想要的。