俺要加薪
学习的过程本来就是一种生活态度的体现，态度才是决定一切的～

 

支持标准的手动＋自动轮显

[ 2006-5-12 17:31:00 | By: 飞飞 ]

研究了一段时间的js，谈不上收获。。会改人家的代码而已·

【1】纯手动：

<!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=utf-8" />
<title>DIV - 自/手动变换</title>
<style type="text/css">
<!--
@charset "utf-8";
/* PR-CSS 全局设置 */
* {font:normal 12px/150% "宋体", Arial;color:#666;padding:0;margin:0;}/*所有内外补丁为0，字体粗

细正常，12px大，150%行高，#666颜色*/
ul,ol,dl {list-style:none;}/*所有项目符号显示无*/
img {border:0;}/*所有图片边框无*/
a {text-decoration:none;}/*所有链接无修饰[上、下划线，虚线...]*/
a:hover {text-decoration:underline;}/*所有链接鼠标放上时为下划线*/
button {cursor:pointer;}/*所有按钮鼠标放上时为手型标志*/
/* 全局设置完毕 */

/* PR-CSS 布局设置 */
body {text-align:center;background:#fff;}/*内容对齐方式为居中[IE居中方式],为了保证浏览器的兼容性

，必须设置页面背景*/
#center,#bottom {width:750px;text-align:left;clear:both;margin:0 auto;background:#fff;}/*设置总

宽度，文本对齐方式改回默认left,清除周围浮动，左右自适应[FireFox居中方式]*/
#center2 {float:left;background:#fff;}/*设置背景。设置浮动，使该元素在FireFox下获得高度从而显示

背景*/
#pr {width:748px;filter: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0,

motion='forward');border:solid #ddd 1px;margin:50px 0 0;}
#pr div {height:200px;padding:10px;border:solid #fff 1px;}
#bottom {margin:10px;text-align:center;}
-->
</style>
<script type="text/javascript">
<!--

function toggleTo(img)
{var ts=document.getElementById("pr").getElementsByTagName("DIV");
 for(i=1;i<ts.length+1;i++){
 if(img==i)
 {
   document.getElementById ("oDIV"+i).style.display = "";}
 else{document.getElementById ("oDIV"+i).style.display = "none";
   
 }}
}
-->
</script>
</head>

<body>
<div id="center"><div id="center2">

<div id="pr">
<div id="oDIV1">111111</div>
<div id="oDIV2" style="display:none;">222222</div>
<div id="oDIV3" style="display:none;">333333</div>
<div id="oDIV4" style="display:none;">444444</div>
<div id="oDIV5" style="display:none;">555555</div>
<div id="oDIV6" style="display:none;">666666</div>
</div>
</div></div>
<div id="bottom">
<a href="javascript:toggleTo(1)"> 第一页 </a>
<a href="javascript:toggleTo(2)"> 第二页 </a>
<a href="javascript:toggleTo(3)"> 第三页 </a>
<a href="javascript:toggleTo(4)"> 第四页 </a>
<a href="javascript:toggleTo(5)"> 第五页 </a>
<a href="javascript:toggleTo(6)"> 第六页 </a>
</div>
</body>
</html>

【2】自动＋手动轮显

<!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=utf-8" />
<title>DIV - 自/手动变换</title>
<style type="text/css">
<!--
@charset "utf-8";
/* PR-CSS 全局设置 */
* {font:normal 12px/150% "宋体", Arial;color:#666;padding:0;margin:0;}/*所有内外补丁为0，字体粗

细正常，12px大，150%行高，#666颜色*/
ul,ol,dl {list-style:none;}/*所有项目符号显示无*/
img {border:0;}/*所有图片边框无*/
a {text-decoration:none;}/*所有链接无修饰[上、下划线，虚线...]*/
a:hover {text-decoration:underline;}/*所有链接鼠标放上时为下划线*/
button {cursor:pointer;}/*所有按钮鼠标放上时为手型标志*/
/* 全局设置完毕 */

/* PR-CSS 布局设置 */
body {text-align:center;background:#fff;}/*内容对齐方式为居中[IE居中方式],为了保证浏览器的兼容性

，必须设置页面背景*/
#center,#bottom {width:750px;text-align:left;clear:both;margin:0 auto;background:#fff;}/*设置总

宽度，文本对齐方式改回默认left,清除周围浮动，左右自适应[FireFox居中方式]*/
#center2 {float:left;background:#fff;}/*设置背景。设置浮动，使该元素在FireFox下获得高度从而显示

背景*/
#pr {width:748px;filter: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0,

motion='forward');border:solid #ddd 1px;margin:50px 0 0;}
#pr div {height:200px;padding:10px;border:solid #fff 1px;}
#bottom {margin:10px;text-align:center;}
-->
</style>
<script type="text/javascript">
<!--
var NowImg = 1;
var bStart = 0;
var bStop =0;

function fnToggle()
{var imgs=document.getElementById("pr").getElementsByTagName("DIV"); // 获取img的个数
  var MaxImg=imgs.length;
 var next = NowImg+1;

 if(next == MaxImg+1)
 {
  NowImg = MaxImg;
  next = 1;
 }
 alert(next);

 if(bStop!=1)
 {

  if(bStart == 0)
  {
   bStart = 1;  
   setTimeout('fnToggle()', 4000);
   return;
  }
  else
  {
   pr.filters[0].Apply();
   document.getElementById("oDIV"+next).style.display = "";
   document.getElementById("oDIV"+NowImg).style.display = "none";

   pr.filters[0].Play(duration=2);

   if(NowImg == MaxImg)
    NowImg = 1;
   else
    NowImg++;
  }
  setTimeout('fnToggle()', 4000);
 }
}


function toggleTo(img)
{var ts=document.getElementById("pr").getElementsByTagName("DIV");//获取img的个数
 bStop=1;  // 这个的作用是停止自动轮显。如果去掉。会发生很有意思的现象。。想知道？自己试试嘛～
 for(i=1;i<ts.length+1;i++){
 if(img==i)
 {
   document.getElementById ("oDIV"+i).style.display = "";}
 else{document.getElementById ("oDIV"+i).style.display = "none";
   
 }}
}
-->
</script>
</head>

<body  onload="fnToggle()">
<div id="center"><div id="center2">

<div id="pr">
<div id="oDIV1">111111</div>
<div id="oDIV2" style="display:none;">222222</div>
<div id="oDIV3" style="display:none;">333333</div>
<div id="oDIV4" style="display:none;">444444</div>
<div id="oDIV5" style="display:none;">555555</div>
<div id="oDIV6" style="display:none;">666666</div>
</div>
</div></div>
<div id="bottom">
<a href="javascript:toggleTo(1)"> 第一页 </a>
<a href="javascript:toggleTo(2)"> 第二页 </a>
<a href="javascript:toggleTo(3)"> 第三页 </a>
<a href="javascript:toggleTo(4)"> 第四页 </a>
<a href="javascript:toggleTo(5)"> 第五页 </a>
<a href="javascript:toggleTo(6)"> 第六页 </a>
</div>
</body>
</html>

阅读全文 | 回复(0) | 引用通告 | 编辑

发表评论：

    密码：
    主页：
    标题：
    页面数据正在载入...
bxna 京ICP备05002321号