网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
背景图像
-> 带缩略图的图片轮换广告代码
带缩略图的图片轮换广告代码
作者:admin 发布时间:2009-6-23 19:39:23 发布人: admin
<style> BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #000; PADDING-BOTTOM: 0px; MARGIN-LEFT: auto; COLOR: #f6f6ee; MARGIN-RIGHT: auto; PADDING-TOP: 0px; FONT-FAMILY: 宋体; HEIGHT: 490px; TEXT-ALIGN: center } A { COLOR: #fff; TEXT-DECORATION: none } A:hover { COLOR: #fff; TEXT-DECORATION: underline } .fpic { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; Z-INDEX: 3; BACKGROUND: #000; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 476px; POSITION: relative; HEIGHT: 330px; BORDER-RIGHT-WIDTH: 0px;BORDER: #dddddd 1px solid; text-align:center } .bpic { FLOAT: left; MARGIN: 0px; WIDTH: 244px; POSITION: relative; HEIGHT: 243px } #focpic { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; LEFT: 1px; BORDER-BOTTOM-WIDTH: 0px; POSITION: absolute; TOP: 1px; BORDER-RIGHT-WIDTH: 0px } .thubpic { PADDING-RIGHT: 0px; PADDING-LEFT: 4px; Z-INDEX: 20; PADDING-BOTTOM: 0px; WIDTH: 63px; CURSOR: pointer; PADDING-TOP: 4px; TOP: 10px; HEIGHT: 49px } .thubpiccur { PADDING-RIGHT: 0px; PADDING-LEFT: 4px; Z-INDEX: 20; PADDING-BOTTOM: 0px; WIDTH: 63px; CURSOR: pointer; PADDING-TOP: 4px; TOP: 10px; HEIGHT: 49px } .thubpiccur { Z-INDEX: 30; BACKGROUND: url(/web/20150530185158im_/http://myjs.jz123.cn/js/beijing/icon/images20071220/arrow3.gif) no-repeat left 50% } .thubpic IMG { BORDER-RIGHT: #666 3px solid; BORDER-TOP: #666 2px solid; BORDER-LEFT: #666 3px solid; WIDTH: 56px; BORDER-BOTTOM: #666 2px solid; HEIGHT: 42px } .thubpiccur IMG { BORDER-RIGHT: #666 3px solid; BORDER-TOP: #666 2px solid; BORDER-LEFT: #666 3px solid; WIDTH: 56px; BORDER-BOTTOM: #666 2px solid; HEIGHT: 42px } .thubpiccur IMG { BORDER-LEFT-COLOR: #fff; BORDER-BOTTOM-COLOR: #fff; BORDER-TOP-COLOR: #fff; BORDER-RIGHT-COLOR: #fff } --> </style> <script language="javascript"> // welcome to www.jz123.cn var currslid = 0; var slidint; function setfoc(id){ document.getElementById("focpic").src = picarry[id]; document.getElementById("foclnk").href = lnkarry[id]; document.getElementById("fttltxt").innerHTML = '<a href="'+lnkarry[id]+'" target="_blank">'+ttlarry[id]+'</a>'; currslid = id; for(i=0;i<6;i++){ document.getElementById("tmb"+i).className = "thubpic"; }; document.getElementById("tmb"+id).className ="thubpiccur"; focpic.style.visibility = "hidden"; focpic.filters[0].Apply(); if (focpic.style.visibility == "visible") { focpic.style.visibility = "hidden"; focpic.filters.revealTrans.transition=23; } else { focpic.style.visibility = "visible"; focpic.filters[0].transition=23; } focpic.filters[0].Play(); stopit(); } function playnext(){ if(currslid==5){ currslid = 0; } else{ currslid++; }; setfoc(currslid); playit(); } function playit(){ slidint = setTimeout(playnext,4500); } function stopit(){ clearTimeout(slidint); } window.onload = function(){ playit(); } </script> </head> <body> <div class="fpic"> <a id="foclnk" href="http://web.archive.org/web/20150530185158/http://www.jz123.cn/" target="_blank"><img id="focpic" style="FILTER: RevealTrans ( duration = 1,transition=23 ); VISIBILITY: visible; POSITION: absolute" height="300" alt="" src="http://web.archive.org/web/20150530185158im_/http://www.qpsh.com/icon/images20071220/01.jpg" width="400"></a> <div id="fttltxt" style="MARGIN-TOP: 305px; FLOAT: left; WIDTH: 400px; TEXT-ALIGN: center"><a href="http://web.archive.org/web/20150530185158/http://www.jz123.cn/" target="_blank">梦:牧场小屋</a></div> <div style="MARGIN-LEFT: 402px; WIDTH: 65px"> <div class="thubpiccur" id="tmb0" onmouseover="setfoc(0);" onmouseout="playit();"><a href="http://web.archive.org/web/20150530185158/http://www.jz123.cn/" target="_blank"><img src="http://web.archive.org/web/20150530185158im_/http://www.qpsh.com/icon/images20071220/01.jpg" alt="" width="56" height="42" border="0"></a></div> <div class="thubpic" id="tmb1" onmouseover="setfoc(1);" onmouseout="playit();"><a href="http://web.archive.org/web/20150530185158/http://www.jz123.cn/" target="_blank"><img height="45" alt="" src="http://web.archive.org/web/20150530185158im_/http://www.qpsh.com/icon/images20071220/02.jpg" width="56"></a></div> <div class="thubpic" id="tmb2" onmouseover="setfoc(2);" onmouseout="playit();"><a href="http://web.archive.org/web/20150530185158/http://www.jz123.cn/" target="_blank"><img height="45" alt="" src="http://web.archive.org/web/20150530185158im_/http://www.qpsh.com/icon/images20071220/03.jpg" width="56"></a></div> <div class="thubpic" id="tmb3" onmouseover="setfoc(3);" onmouseout="playit();"><a href="http://web.archive.org/web/20150530185158/http://www.jz123.cn/" target="_blank"><img height="45" alt="" src="http://web.archive.org/web/20150530185158im_/http://www.qpsh.com/icon/images20071220/04.jpg" width="56"></a></div> <div class="thubpic" id="tmb4" onmouseover="setfoc(4);" onmouseout="playit();"><a href="http://web.archive.org/web/20150530185158/http://www.jz123.cn/" target="_blank"><img height="45" alt="" src="http://web.archive.org/web/20150530185158im_/http://www.qpsh.com/icon/images20071220/05.jpg" width="56"></a></div> <div class="thubpic" id="tmb5" onmouseover="setfoc(5);" onmouseout="playit();"><a href="http://web.archive.org/web/20150530185158/http://www.jz123.cn/" target="_blank"><img height="45" alt="" src="http://web.archive.org/web/20150530185158im_/http://www.qpsh.com/icon/images20071220/06.jpg" width="56"></a></div> <script language="javascript" type="text/javascript"> var picarry = {}; var lnkarry = {}; var ttlarry = {}; picarry[0] = "http://web.archive.org/web/20150530185158/http://www.qpsh.com/icon/images20071220/01.jpg"; lnkarry[0] = "http://web.archive.org/web/20150530185158/http://www.jz123.cn/"; ttlarry[0] = "梦:牧场小屋"; picarry[1] = "http://web.archive.org/web/20150530185158/http://www.qpsh.com/icon/images20071220/02.jpg"; lnkarry[1] = "http://web.archive.org/web/20150530185158/http://www.jz123.cn/"; ttlarry[1] = "碎玉:回眸"; picarry[2] = "http://web.archive.org/web/20150530185158/http://www.qpsh.com/icon/images20071220/03.jpg"; lnkarry[2] = "http://web.archive.org/web/20150530185158/http://www.jz123.cn/"; ttlarry[2] = "飞狐:豆花档"; picarry[3] = "http://web.archive.org/web/20150530185158/http://www.qpsh.com/icon/images20071220/04.jpg"; lnkarry[3] = "http://web.archive.org/web/20150530185158/http://www.jz123.cn/"; ttlarry[3] = "牛说不哭:烈日下的建筑工人"; picarry[4] = "http://web.archive.org/web/20150530185158/http://www.qpsh.com/icon/images20071220/05.jpg"; lnkarry[4] = "http://web.archive.org/web/20150530185158/http://www.jz123.cn/"; ttlarry[4] = "新疆瓦格:哈萨克族搭建毡房"; picarry[5] = "http://web.archive.org/web/20150530185158/http://www.qpsh.com/icon/images20071220/06.jpg"; lnkarry[5] = "http://web.archive.org/web/20150530185158/http://www.jz123.cn/"; ttlarry[5] = "松间明月:汽车文化"; </script> </div></div> 页特效网址:<a href="http://web.archive.org/web/20150530185158/http://myjs.jz123.cn/">http://js.jz123.cn</a>
带缩略图的图片轮换广告代码
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
Js图片滑动切换效果
下一篇:文章:
隔行变色的js网页特效
本类浏览排行 »
搜索页面中的内容
又一款综合搜索引擎代码
标题栏显示当前时间
倒影效果的电子表,显示当前时间
自动记录当前页面最新的更新日期
JS让网页每隔2秒弹出一次对话框
一款超酷的CSS列表排行榜
鼠标悬停放大的纯CSS分页效果
本站推荐文章 »
垂直三栏自适应等高布局
仿QQ消息管理器的文本内容样式
支付宝的控制台动画效果菜单
文字、图片拖曳移动
可拉伸移动的DIV层效果
很酷的图片伸缩放大功能
较好的视觉效果的网页选项卡
CSS实例:通过定义渐变边框给图片加阴影