教程集 > 脚本编程 > javascript > 正文 CSS滑门为自动切换

CSS滑门为自动切换

发布时间：2023-06-17 编辑：jiaochengji.com

教程集为您提供CSS滑门为自动切换等资源，欢迎您收藏本站，我们将为您提供最新的CSS滑门为自动切换资源

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

<!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=gb2312" />  <meta content="" name=keywords>  <title>栏目切换 </title>  <link rel="Shortcut Icon" href="designac.ico">  <link rel="Bookmark" href="designac.ico">  <style>  *{padding:0;margin:0}  BODY	{PADDING: 0;FONT-SIZE: 12px;MARGIN: 0px auto;COLOR: #333;TEXT-ALIGN: center;margin: 5 0px;}  .indexNews              {FLOAT: left; WIDTH: 430px;}  .top                    {margin-left:-1px;background:#f9fdf7; WIDTH: auto; HEIGHT: 27px}  a:link                  {color: #000000;text-decoration: none;font-family: "宋体";font-size: 14px;}  a:hover                 {color: #000000;text-decoration: none;font-family: "宋体";font-size: 14px;}  .option1                {FONT-WEIGHT: bold; FLOAT: left; WIDTH: 99px; CURSOR: pointer; LINE-HEIGHT: 24px;background:url(images/bg.gif) no-repeat #aaf;HEIGHT: 27px;margin-left:5px;}  .option2                {float: left; WIDTH: 99px; CURSOR: pointer; background:url(images/bg.gif) no-repeat #faa; LINE-HEIGHT: 24px;HEIGHT: 27px;margin-left:5px;}  .newsBorder             {BORDER: #a4a4a4 1px solid; BORDER-top: 0; TABLE-LAYOUT: fixed; WIDTH: 409px; HEIGHT: 350px;background:#f9fdf7;}  .articleList            {PADDING-TOP: 0px 3px; MARGIN: 0px; TEXT-ALIGN: left}  .articleList img        {float:left;margin:5px 10px 5px 0;}  .articleList UL         {width:400px;MARGIN: 0px; COLOR: #dedede; LIST-STYLE-TYPE: none}  .articleList LI         {float:left;width:170px;margin:5px 5px 0 10px; }  .articleList LI A       {COLOR: #333;TEXT-DECORATION: none;font-family: "宋体";font-size: 12px;  }  .articleList LI A:hover {COLOR: #bf0000;TEXT-DECORATION: none;font-family: "宋体";font-size: 12px;}  </style>  </head>  <script language=Javascript >  	//活动  	var newsID = '';  	function news(id){  		var newsObj = document.getElementById('a'   newsID);  		if(newsObj){  			 newsObj.style.display = 'none';  			 document.getElementById('b'   newsID).className = 'option2';  		}  		var obj = document.getElementById('a'   id);  		document.getElementById('b'   id).className = 'option1';  		obj.style.display = '';  		newsID = id;  		k=id;  	}                    var news1ID = '';  	function news1(id){  		var news1Obj = document.getElementById('c'   news1ID);  		if(news1Obj){  			 news1Obj.style.display = 'none';  			 document.getElementById('d'   news1ID).className = 'option2';  		}  		var obj = document.getElementById('c'   id);  		document.getElementById('d'   id).className = 'option1';  		obj.style.display = '';  		news1ID = id;  	}  </script>  <body>      <div class="indexNews">    <div class="top">      <div class="option2" id="b1" onmouseover="news(1)">最新活动</div>      <div class="option2" id="b2" onmouseover="news(2)">推荐活动</div>      <div class="option2" id="b3" onmouseover="news(3)">活动主题</div>      <div class="option2" id="b4" onmouseover="news(4)">活动动态</div>    </div>    <div class="newsBorder">      <div id="a1" style="display:none;">  	<div class=articleList>            <ul>                            <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>              <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>              <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>              <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>              <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>              <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>            </ul>          </div>      </div>  	      <div id="a2" style="display:none;">  	<div class=articleList>            <ul>                            <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>              <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>              <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>              <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>            </ul>          </div>      </div>      <div id="a3" style="display:none;">  	<div class=articleList>            <ul>                            <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>              <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>              <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>              <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>              <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>            </ul>          </div>      </div>      <div id="a4" style="display:none;">  	<div class=articleList>            <ul>                            <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>              <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>              <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>              <li><img src="" />动感地带 我的音乐地盘2008  周杰伦世界巡回演唱会·北京</li>            </ul>          </div>      </div>    </div>  </div>  <script language=javascript>  var k=0;  window.onload=function init(){  k  ;  if (k>4)k=1  news(k)  setTimeout (init,2000)//停顿时间2秒  }  </script>  </body>  </html>

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

您可能感兴趣的文章：
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
 jQuery实现类似滑动门切换效果的层切换
 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
 40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
 对css滑动门技术的一些总结和归纳
 JavaScript 图片滑动切换效果
 jQuery 滑动方法slideDown向下滑动元素
 javascript 滑动门式菜单
 基于JQuery 滑动与动画的说明介绍
 javascript 仿flash焦点图片切换代码

上一篇：点击小图放大图片下一篇：间歇式滚动广告[直滚]

[关闭]

CSS滑门为自动切换

最近更新

浏览排行