网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
背景图像
-> 很漂亮的图片切换效果
很漂亮的图片切换效果
作者:佚名 发布时间:2009-11-22 10:21:26 发布人: admin
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>图片滑动显示效果,jz123整理收集。</title> <style type="text/css"> * {margin:0;padding:0;} body {margin:5px auto;background:#f0f0f0;} img {margin:0;border:0;padding:0;} #jsF {position:relative;margin:0;width:270px;height:185px;overflow:hidden;} #jsF ul {position:absolute;top:0;left:0;list-style-type:none;z-index:1;} #jsF li {display:block;position:absolute;top:0;margin:0;padding:0;overflow:hidden;} </style> </head> <body> 告诉你一个应有尽有的网页特效网址:<a href="http://web.archive.org/web/20150530183539/http://myjs.jz123.cn/">http://myjs.jz123.cn</a> <hr/> <div id="jsF"></div> <div id="debug"></div> <script> //<[CDATA[ var jsF = document.getElementById('jsF'); var speed1 = 50, speed2 = 2000; var iA = 0, iB = 0, iC = 0; var bD = []; var aImg = ['http://web.archive.org/web/20150530183539/http://download.jz123.cn/sc/20090512101643973.jpg','http://web.archive.org/web/20150530183539/http://download.jz123.cn/sc/20090512101643973.jpg','http://web.archive.org/web/20150530183539/http://download.jz123.cn/sc/20090512101643973.jpg','http://web.archive.org/web/20150530183539/http://download.jz123.cn/sc/20090512101643973.jpg','http://web.archive.org/web/20150530183539/http://download.jz123.cn/sc/20090512101643973.jpg' ]; var aLink = ['http://web.archive.org/web/20150530183539/http://www.jz123.cn','http://web.archive.org/web/20150530183539/http://www.jz123.cn','http://web.archive.org/web/20150530183539/http://www.jz123.cn','http://web.archive.org/web/20150530183539/http://www.jz123.cn','http://web.archive.org/web/20150530183539/http://www.jz123.cn','http://web.archive.org/web/20150530183539/http://www.jz123.cn']; var iImgWidth = 270, iImgHeight = 185; var iDivWidth = iImgWidth/10; jsF.style.width = iImgWidth + 'px'; jsF.style.height = iImgHeight + 'px'; var oImg = []; oImg[0] = new Image(); oImg[0].src = aImg[0]; oImg[1] = new Image(); oImg[1].src = aImg[1]; window.onload = function() { jsF_create(); } //´´½¨ÄÚÈÝ function jsF_create() { if (aImg[iA+2] && !bD[iA+2]){ oImg[iA+2] = new Image(); oImg[iA+2].src = aImg[iA+2]; } if (!bD[iA]) { var oUl = document.createElement('ul'); /*oUl.style.position = 'absolute'; oUl.style.top = '0'; oUl.style.left = '0';*/ oUl.style.width = iImgWidth + 'px'; oUl.style.height = iImgHeight + 'px'; var oUlLi = document.createElement('li'); oUlLi.style.right = '0'; oUlLi.style.width = iDivWidth +'px'; oUlLi.style.height = iImgHeight + 'px'; var oLiA = document.createElement('a'); oLiA.href = aLink[iA]; var oLiImg = document.createElement('img'); oLiImg.src = oImg[iA].src; oLiImg.style.marginLeft = -9*iDivWidth + 'px'; oLiA.appendChild(oLiImg); oUlLi.appendChild(oLiA); oUl.appendChild(oUlLi); for (var i=0; i<10; i++) { oUlLi = document.createElement('li'); oUlLi.style.right = i*iDivWidth + 'px'; oUlLi.style.width = 1.5*iDivWidth +'px'; oUlLi.style.height = iImgHeight + 'px'; //oUlLi.style.background = color[i]; oLiA = document.createElement('a'); oLiA.href = aLink[iA]; oLiImg = document.createElement('img'); oLiImg.src = oImg[iA].src; oLiImg.style.marginLeft = -9*iDivWidth + 'px'; oLiA.appendChild(oLiImg); oUlLi.appendChild(oLiA); //oUlLi.appendChild(document.createTextNode(i)); oUl.appendChild(oUlLi); } jsF.appendChild(oUl); bD[iA] = !bD[iA]; } jsF_show(); //document.getElementById('debug').innerText = jsF.innerHTML; } //ÏÔÏÖÄÚÈÝ function jsF_show(){ var oUl = jsF.getElementsByTagName('ul'); var oLi = oUl[iA].getElementsByTagName('li'); var oImgs = oUl[iA].getElementsByTagName('img'); oUl[iA].style.zIndex = ++iC; for (var i=1; i<11; i++){ oImgs[i].style.marginLeft = -9*iDivWidth + 'px'; oImgs[i].style.visibility = 'hidden'; } jsF_move(); } //Òƶ¯ÄÚÈÝ function jsF_move(){ var oUl = jsF.getElementsByTagName('ul'); var oLi = oUl[iA].getElementsByTagName('li'); var oImgs = oUl[iA].getElementsByTagName('img'); if (iB++<10) oImgs[iB].style.visibility = 'visible'; for (var i=1; i<oImgs.length; i++) { var iBgpx = parseInt(oImgs[i].style.marginLeft); if (iBgpx<(i+0.5)*iDivWidth-iImgWidth) { var iMovePx = Math.floor((iImgWidth-(i+0.5)*iDivWidth+iBgpx)/15); oImgs[i].style.marginLeft = iBgpx - iMovePx + 'px'; } else { oImgs[i].style.marginLeft = ((i+0.5)*iDivWidth-iImgWidth) + 'px'; } } //document.getElementById('debug').innerText = jsF.innerHTML; if (parseInt(oImgs[10].style.marginLeft)<0.5*iDivWidth) { setTimeout('jsF_move()',speed1); } else { iB = 0; //document.getElementById('debug').innerText = oUl[iA].style.display; iA = ++iA==aImg.length ? 0 : iA; if (bD[iA]) { setTimeout('jsF_show()',speed2); } else { setTimeout('jsF_create()',speed2); } } } //]]> </script> </body> </html>
很漂亮的图片切换效果,可自定义图片
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
企业网站常用导航菜单
下一篇:文章:
漂亮的烟花特效
本类浏览排行 »
搜索页面中的内容
又一款综合搜索引擎代码
标题栏显示当前时间
倒影效果的电子表,显示当前时间
自动记录当前页面最新的更新日期
JS让网页每隔2秒弹出一次对话框
一款超酷的CSS列表排行榜
鼠标悬停放大的纯CSS分页效果
本站推荐文章 »
垂直三栏自适应等高布局
仿QQ消息管理器的文本内容样式
支付宝的控制台动画效果菜单
文字、图片拖曳移动
可拉伸移动的DIV层效果
很酷的图片伸缩放大功能
较好的视觉效果的网页选项卡
CSS实例:通过定义渐变边框给图片加阴影