夜鹰教程网-程序员的加油站
 当前位置:文章中心 >> Css3.0_css2.0_html5
网站变换图片的显示方法
夜鹰教程网 来源:www.yyjcw.com 日期:2016-11-14 18:20:17
网站变换图片的显示方法

<STYLE type=text/css>.show {
DISPLAY: block
}
.dis1 {
DISPLAY: none
}
#bimg {
FILTER: progid:DXImageTransform.Microsoft.Fade ( duration=0.5,overlap=1.0 ); POSITION: relative
}
#simg DIV {
FONT-WEIGHT: bold; BACKGROUND: url(http://mat1.qq.com/cd//index_images/200810/jd_bg_03.gif); FLOAT: left; WIDTH: 16px; CURSOR: pointer; COLOR: #412c00; LINE-HEIGHT: 16px; MARGIN-RIGHT: 5px; HEIGHT: 16px; TEXT-ALIGN: center
}
#simg DIV.s {
BACKGROUND: url(http://mat1.qq.com/cd//index_images/200810/jd_bg_05.gif)
}
.jd_bg_1 {
BACKGROUND: #161616; FILTER: Alpha(Opacity=40); LEFT: 0px; WIDTH: 368px; BOTTOM: 0px; POSITION: absolute; HEIGHT: 28px; moz-opacity: 0.2
}
#info {
FONT-WEIGHT: bold; LEFT: 0px; WIDTH: 368px; BOTTOM: 0px; LINE-HEIGHT: 22px; PADDING-TOP: 4px; POSITION: absolute; TEXT-ALIGN: left
}
#info A {
PADDING-LEFT: 20px; FONT-SIZE: 14px; COLOR: #fff; TEXT-DECORATION: none
}
#info A:hover {
COLOR: #ff0000; TEXT-DECORATION: underline
}
#simg {
LEFT: 0px; WIDTH: 368px; BOTTOM: 7px; POSITION: absolute
}
#simg SPAN {
FLOAT: right
}
</STYLE>
</head>

<body>

                  <TABLE cellSpacing=0 cellPadding=0 width=388 align=center
                  border=0>
                    <TBODY>
                    <TR>
                      <TD height=215>
                        <DIV id=bimg>
                        <DIV class=show name="f"><A
                        href="http://act3.xian.qq.com/3040/work/show-id-149.html"
                        target=_blank><IMG height=235
                        src="西安浪漫日_files/20431572.jpg" width=388
                        border=0></A></DIV>
                        <DIV class=dis1 name="f"><A
                        href="http://act3.xian.qq.com/3040/work/show-id-165.html"
                        target=_blank><IMG height=235
                        src="西安浪漫日_files/20431578.jpg" width=388
                        border=0></A></DIV>
                        <DIV class=dis1 name="f"><A
                        href="http://act3.xian.qq.com/3040/work/show-id-83.html"><IMG
                        height=235 src="西安浪漫日_files/20370236.jpg" width=388
                        border=0></A></DIV>
                        <DIV class=dis1 name="f"><A
                        href="http://act3.xian.qq.com/3040/work/show-id-84.html"
                        target=_blank><IMG height=235
                        src="西安浪漫日_files/20370230.jpg" width=388
                        border=0></A></DIV>
                        <DIV class=dis1 name="f"><A
                        href="http://www.oubaobao.com/qiqinyanan/"
                        target=_blank></A></DIV>
                        <DIV class=jd_bg_1></DIV>
                        <DIV id=info>
                        <DIV class=show name="f"><A
                        href="http://act3.xian.qq.com/3040/work/show-id-149.html"
                        target=_blank>小宇:千里相守</A></DIV>
                        <DIV class=dis1 name="f"><A
                        href="http://act3.xian.qq.com/3040/work/show-id-165.html"
                        target=_blank>任浩南:老婆谢谢你一直陪着我</A>. </DIV>
                        <DIV class=dis1 name="f"><A
                        href="http://act3.xian.qq.com/3040/work/show-id-47.html"
                        target=_blank>爱你:深情目光</A></DIV>
                        <DIV class=dis1 name="f"><A
                        href="http://act3.xian.qq.com/3040/work/show-id-84.html"
                        target=_blank>爱你才是真:我和老公幸福的事</A></DIV>
                        <DIV class=dis1 name="f"><A
                        href="http://act3.xian.qq.com/3040/work/show-id-41.html"
                        target=_blank></A></DIV></DIV>
                        <DIV id=simg><SPAN>
                        <DIV class=s name="f">1</DIV>
                        <DIV name="f">2</DIV>
                        <DIV name="f">3</DIV>
                        <DIV name="f">4</DIV></SPAN></DIV></DIV></TD></TR>
                    <TR>
                      <TD></TD></TR></TBODY></TABLE>
                  <SCRIPT type=text/javascript>
function getid(o){ return (typeof o == "object")?o:document.getElementById(o);}

function getNames(obj,name,tij)
{
   var plist = getid(obj).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 fiterplay(obj,num,t,name,c1,c2)
{
   var fitlist = getNames(obj,name,t);
   for(i=0;i<fitlist.length;i++)

   {
    if(i == num)

    {

     fitlist[i].className = c1;
    }
    else
    {


     fitlist[i].className = c2;


    }

 

   }


}


function play(obj,num)
{
   var s = getid('simg');
   var i = getid('info');
   var b = getid('bimg');

   try


   {


    with(b)


    {
     filters[0].Apply();

     fiterplay(b,num,"div","f","show","dis1");
     fiterplay(s,num,"div","f","s","");

     fiterplay(i,num,"div","f","show","dis1");
     filters[0].play();
    }
   }
   catch(e)

   {
     fiterplay(b,num,"div","f","show","dis1");

     fiterplay(s,num,"div","f","s",
"");
     fiterplay(i,num,"div","f","show","dis1");

   }
}
function format()
{
   var s = getid('simg');
   var l = getNames(s,"f","div")
   for(i=0;i<l.length;i++)

   {
    l[i].num = i;
    l[i].onclick = function()


    {

     play(this,this.num);

    }
   }
}


var autoStart = 0;

var n = 0;


function clearAuto() {clearInterval(autoStart);};
function setAuto(){autoStart=setInterval("auto(n)", 6000)}

function auto()
{

   var s = getid("simg");
   var x = getNames(s,"f","div");
   n++;

   if(n>(x.length-1))
   { n = 0; }
   play(x[n],n);
}
format();
setAuto();
</SCRIPT>

复制链接 网友评论 收藏本文 关闭此页
上一条: 网页设计技巧:CSS布局调试的有效…  下一条: 如何初始化CSS元素?
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  热点推荐
什么是css框架
meta标签实现页面的动感效果
CSS半透明滤镜在FIREFOX和IE下面的…
div+css鼠标悬停在div上,div背景色…
纯css下拉菜单特效
div+css的浏览器兼容问题
CSS定义表格线为单一线
CSS滤镜效果收集(全)
列表显示文字和图片垂直居中对齐
在固定位置显示背景图片
网站变换图片的显示方法
在select外面套一个div或span, se…
常用的CSS命名规则
闪字闪字闪字闪字闪字闪字闪字闪字…
css让图片自动适应表格大小
  最近更新
HTTP协议实现文件断点续传
H5实现断点上传
行内元素和块级元素汇总
H5视频直播技术介绍
border-image详解
你必须知道的HTML5的新特性
html5 js控制音乐播放
HTML+CSS代码规范
css3学习笔记 transition与animat…
css3学习笔记Transform
css3学习笔记2D或3D转换
css3学习笔记文本特效
css3学习笔记颜色和透明度
css3学习笔记二
css3学习笔记一

关于我们 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3