求图片左右切换js解决方法
日期：2014-05-18 浏览次数：20434 次
求图片左右切换js
http://movie.youku.com/
我想要上面那个网站的效果,一次一组图片切换带左右按钮还有下面的4个选项钮,哪位大哥给个代码参考下啊
------解决方案--------------------
可以去模版王 上面下载 ，， 样式我不会写， 就不贴了
------解决方案--------------------
拿去
http://www.csrcode.cn/html/txdm/txtx/3301.htm
------解决方案--------------------
http://www.wangjie.org/ 这个上面有不少我们需要的模板，自己去找找！！！
------解决方案--------------------
------解决方案--------------------
------解决方案--------------------
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)//播放的函数
http://movie.youku.com/
我想要上面那个网站的效果,一次一组图片切换带左右按钮还有下面的4个选项钮,哪位大哥给个代码参考下啊
------解决方案--------------------
可以去模版王 上面下载 ，， 样式我不会写， 就不贴了
------解决方案--------------------
拿去
http://www.csrcode.cn/html/txdm/txtx/3301.htm
------解决方案--------------------
http://www.wangjie.org/ 这个上面有不少我们需要的模板，自己去找找！！！
------解决方案--------------------
------解决方案--------------------
------解决方案--------------------
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)//播放的函数
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
