求图片左右切换js解决方法

2012-04-10

求图片左右切换jshttp://movie.youku.com/我想要上面那个网站的效果,一次一组图片切换带左右按钮还有下面

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

[解决办法]
可以去模版王上面下载，，样式我不会写，就不贴了
[解决办法]
拿去
http://www.csrcode.cn/html/txdm/txtx/3301.htm
[解决办法]
http://www.wangjie.org/ 这个上面有不少我们需要的模板，自己去找找！！！
[解决办法]

探讨
拿去
http://www.csrcode.cn/html/txdm/txtx/3301.htm

[解决办法]

探讨

模版王是什么啊?

[解决办法]

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
[解决办法]

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

[解决办法]
<!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的图片插件，看看看是不是有你想要的。

热点排行

asp.net

求图片左右切换js解决方法