Jquery中文网 > 脚本编程 > javascript > 正文 javascript 竖向排列的图片幻灯切换效果

javascript 竖向排列的图片幻灯切换效果

发布时间：2017-06-09 编辑：www.jquerycn.cn

jquery中文网为您提供javascript 竖向排列的图片幻灯切换效果等资源，欢迎您收藏本站，我们将为您提供最新的javascript 竖向排列的图片幻灯切换效果资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>竖向排列的图片幻灯切换效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body{font-size:12px;font-family:"宋体",Arial,Verdana;line-height:150%;margin:0;padding:0;color:#424242;} div{margin:0 auto;padding:0;} h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,form,img,p{margin:0;padding:0;border:none;list-style-type:none;} .foucs{width:300px;height:350px;background:#faf1e2;position: relative;border:1px solid #ccc;margin-top:50px;} #focuscont{width:232px;height:350px;position:absolute;left:0;top:0;} #focustab{width:70px;height:350px;position:absolute;right:0;top:0;} #focustab img{height:68px;width:48px;} #focuscont .text{width:232px;position:absolute;top:325px;left:0px;color:#000;font-weight:bold;font-size:14px;padding:0 10px;text-align:left;} .focuscont p img{width:230px;height:320px;} .filt{position:absolute;top:325px;left:0px;height:20px;width:232px;} #focustab li{width:70px;height:78px;border-bottom:1px solid #ab946a;} #focustab li a{display:block;padding:3px 0 0px 10px;} #focustab li a.act{background:url() no-repeat;z-index:99;} #focustab li a.act img{border:none;} </style> <script type="text/javascript"> function initAutoFocus(){ autoShiftFocus("focustab", "a", "focuscont", "div"); function autoShiftFocus(tabsid, tabstagname, contentid, contenttagname){ var autotpc = setInterval(autoSlideTopic, 3000); var tabs = document.getElementById(tabsid).getElementsByTagName(tabstagname); var contents = document.getElementById(contentid).getElementsByTagName(contenttagname); var cur_index_num = 0; if (tabstagname == "a") { for (var a = tabs.length - 1; a >= 0; a--) { tabs[a].onclick = function(){ return false; } } } function getContentsArr(){ var contentsarr = new Array(); for (var z=0;z<contents.length; z ) { if(contents[z].id.indexOf(contentid)>=0){ contentsarr[contentsarr.length] = contents[z]; } } return contentsarr; } var contarr=getContentsArr(); function autoSlideTopic(){ for (var a = tabs.length - 1; a >= 0; a--) { tabs[a].className = ""; } for (var b = contarr.length - 1; b >= 0; b--) { contarr[b].style.display = "none"; } contarr[cur_index_num].style.display = "block"; tabs[cur_index_num].className = "act"; var total_num = tabs.length; cur_index_num ; if (cur_index_num >= total_num) { cur_index_num = 0; } } for (var c = tabs.length - 1; c >= 0; c--) { tabs[c].onmouseover = function(){ clearInterval(autotpc); changeTabs(this.name); } tabs[c].onmouseout = function(){ autotpc = setInterval(autoSlideTopic, 3000); } } function changeTabs(num){ var thenum = num - 1; for (var n = tabs.length - 1; n >= 0; n--) { tabs[n].className = ""; } tabs[thenum].className = "act"; for (var m = contarr.length - 1; m >= 0; m--) { contarr[m].style.display = "none"; } contarr[thenum].style.display = "block"; cur_index_num = thenum; } } } </script> </head> <body>