⑴ 如何用js代码实现二级菜单和图片轮播，求大神帮助
图片轮播
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片轮换</title>
</head>
<body>
<script type="text/javascript">
var i=0;
var arr =new Array(3);
arr[0]="<img border=0 width=400 height=240 src=images/pic1.jpg />";
arr[1]="<img border=0 width=400 height=240 src=images/pic2.jpg />";
arr[2]="<img border=0 width=400 height=240 src=images/pic3.jpg />";
function playTp(){
if (i==2){i=0;}
else{i++;}
div1.filters[0].apply();
div1.innerHTML=arr[i];
div1.filters[0].play();
setTimeout('playTp()',6000);
}
</script>
<p><div id="div1" style="filter:revealtrans(ration=2,transition=23);WIDTH:400px;POSITION:absolute;HEIGHT:240px">
<img src="images/pic1.jpg" onload="setTimeout('playTp()',3000);" border="0" width="400" height="240">
</div>
</body>
</html>
二级菜单
<!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" />
<title>左侧导航栏</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
var allli = navRoot.getElementsByTagName("li")
for (i=0; i<allli.length; i++) {
node = allli[i];
node.onmouseover=function() {
this.className+=" current";
}
node.onmouseout=function() {
this.className=this.className.replace(" current", "");
}
}
}
}
window.onload=startList;
//--><!]]></script>
<style type="text/css">
<!--
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu {
border: 1px solid #999999;
width: 200px;
text-align: center;
}
#menu ul li {
height: 36px;
padding-top: 0px;
padding-right: 8px;
padding-bottom: 0px;
padding-left: 8px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
line-height: 36px;
position: relative;
}
#menu ul a {
color: #666666;
text-decoration: none;
}
#menu ul a:hover {
color: #CC3300;
}
body {
font-family: "宋体";
font-size: 14px;
font-weight: bold;
}
#menu ul ul {
position: absolute;
visibility: hidden;
left: 200px;
top: 0px;
border: 1px solid #CCC;
background-image: url(images/bgc_2.jpg);
background-repeat: no-repeat;
background-position: right;
}
#menu ul ul li {
line-height: 26px;
height: 26px;
width: 150px;
filter: Alpha(Opacity=50, FinishOpacity=80, Style=50, StartX=200, StartY=, FinishX=, FinishY=);
}
#menu .left {
background-image: url(images/bgc_1.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}
#menu ul li.current ul {
visibility: visible;
}
#menu ul li:hover ul {
visibility: visible;
}
#menu ul li:hover{
background-image: url(images/bgc_4.jpg);
background-repeat: no-repeat;
}
-->
</style>
</head>
<body>
<div id="menu">
<div><img src="images/hang.png" width="200" height="36"/></div>
<div class="left">
<ul>
<li><a href="#">系部导航</a></li>
<li><a href="#">组织机构</a>
<ul>
<li><a href="#">学生办公室</a></li>
<li><a href="#">人事处</a></li>
<li><a href="#">总务处</a></li>
<li><a href="#">财务处</a></li>
<li><a href="#">保卫处</a></li>
</ul>
</li>
<li><a href="#">职业培训</a></li>
<li><a href="#">图书馆式</a></li>
<li><a href="#">实训基地</a></li>
<li><a href="#">E-learning</a></li>
<li><a href="#">学生风采</a></li>
<li><a href="#">信息公开</a></li>
<li><a href="#">专业建设发展栏</a></li>
</ul>
</div>
</div>
</body>
</html>
⑵ 在网页设计中的，我想导航栏下方插入轮播图片的的特效代码，是如何插入的请高手指点。。。谢谢
试试这个图片切换
有12345数字一起切换
鼠标点一下数字会变换到另一张图片，不点就会自动换
里面有教程和源码
⑶ web前端开发小插件之swiper轮播图
前端开发是现在比较火的一个职业，当然前端工程师的水平也是参差不齐，小编也是其中一员，技术还在努力提高中。在前端开发中经常会遇到要做轮播图的时候，一般在网站首页。网上有很多的轮播图插件，小编要介绍的就是一款跨PC跟移动平台的轮播图插件——swiper。
⑷ 我自己做了一个网页，上面是导航栏，下面是轮播图，导航栏菜单展开时总是被轮播图挡住，怎样使菜单显示在
导航菜单，最外层 position:relative； z-index：9999
⑸ 请教用JQuery、javascript 淘宝网首页的那个图片轮播怎么做出来的它的图片是左右移动的，如何实现
⑹ HTML首页怎么加图片轮播
可以通过输入代码来操作。
⑺ 把导航栏透明悬浮在banner轮播图上，跟下面的图片这样。
导航栏置顶，设置透明度，设置z-index值，或者float值。
轮播图置顶
⑻ HTML首页怎么加图片轮播
<html>
<head>
<title>图片滚动 </title>
<style>
#div1 {position:relative;width:650px;height:210px;overflow:hidden; }
#div2{position:absolute;}
li{float:left;list-style-type:none;padding:5px;}
img{border:none;}
a{position:relative;}
</style>
<script>
window.onload=function()
{
var odiv2=document.getElementById('div2');
var ali=odiv2.getElementsByTagName('li');
var aspeed=-5;
odiv2.innerHTML+=odiv2.innerHTML;
odiv2.style.width=ali[0].offsetWidth*ali.length+'px';
setInterval(function()
{
odiv2.style.left=odiv2.offsetLeft+aspeed+'px';
if (odiv2.offsetLeft<-odiv2.offsetWidth/2)
{
odiv2.style.left='0px';
}
},30);};
}
</script>
</head>
<body>
<div id='div1'>
<div id='div2'>
<li><a href=""><img src="1.jpg" /></a></li>
<li><a href=""><img src="2.jpg" /></a></li>
<li><a href=""><img src="3.jpg" /></a></li>
<li><a href=""><img src="4.jpg" /></a></li>
<!--这边你可以添加任意多的li，也就是你可以添加任意多的图片，使任意多的图片轮播-->
</div>
</div>
</body>
</html>
⑼ 如何用Bootstrap制作轮播图
Bootstrap是Twitter推出的一个用于前端开发的开源工具包，并没有制作任何前端页面的功能。
如果要实现轮播可以通过一下代码实现：
<styletype="text/css">
*{padding:0;margin:0;list-style-type:none;}
body{background-color:#222222}
a,img{border:0;}
body{font:12px/180%Arial,Helvetica,sans-serif,"新宋体";}
/*demo*/
/*五张图片在缩略图时所显示的位置调整*/
#demoli:nth-of-type(1)img{transform:translate(-210px);}
#demoli:nth-of-type(2)img{transform:translate(-180px);}
#demoli:nth-of-type(3)img{transform:translate(-380px);}
#demoli:nth-of-type(4)img{transform:translate(-450px);}
#demoli:nth-of-type(5)img{transform:translate(-320px);}
#demo{width:1160px;height:512px;margin:60pxauto0auto;}
#demoimg{width:820px;height:512px;max-width:820px;}
#demoli{float:left;position:relative;width:82px;height:100%;overflow:hidden;cursor:pointer;transition:0.5s;transform-origin:bottom;filter:alpha(opacity=50);opacity:0.5;}
#demoliimg{transition:1.2s;}
#demolia{display:block;}
#demolidiv{position:absolute;bottom:0;left:0;width:100%;background:#000;line-height:32px;filter:alpha(opacity=70);opacity:0.7;text-indent:2em;}
#demolidiva{color:#FFF;text-decoration:none;}
#demolidiva:hover{color:#F00;text-decoration:none;}
#demoli.active{cursor:pointer;transform:scale(1.02,1.08);z-index:3;width:820px;filter:alpha(opacity=100);opacity:1;}
#demoli.activeimg{transform:translate(0px);}
#demoli:nth-of-type(1){transform-origin:bottomleft;}
#demoli:nth-of-type(5){transform-origin:bottomright;}
</style>
<scriptsrc="js/jquery-1.8.2.min.js"></script>
<scripttype="text/javascript"src="js/jquery.indexSlidePattern.js"></script>
<scriptlanguage="javascript">
$(document).ready(function(e){
varopt = {
"speed" : "fast" , //变换速度,三速度可选slow,normal,fast;
"by" : "mouseover" , //触发事件,click或者mouseover;
"auto" : true , //是否自动播放;
"sec" : 3000 //自动播放间隔;
};
$("#demo").IMGDEMO(opt);
});
</script>
</head>
<body>
<ulid="demo">
<liclass="active"><ahref="#"><imgsrc="images/1.png"/></a>
<div><ahref="#">Pictureinformation1</a></div>
</li>
<li><ahref="#"><imgsrc="images/2.png"/></a>
<div><ahref="#">Pictureinformation2</a></div>
</li>
<li><ahref="#"><imgsrc="images/3.png"/></a>
<div><ahref="#">Pictureinformation3</a></div>
</li>
<li><ahref="#"><imgsrc="images/4.png"/></a>
<div><ahref="#">Pictureinformation4</a></div>
</li>
<li><ahref="#"><imgsrc="images/5.png"/></a>
<div><ahref="#">Pictureinformation5</a></div>
</li>
</ul>
</div>
</body>
</html>
本案例使用的是jQuery，需要jquery.indexSlidePattern与jquery-1.8.2.min的jQuery库！
⑽ 淘宝店铺PC端怎么插入多张轮播图
需要设置。
步骤1、首先登陆淘宝网首页，输入淘宝账号密码进入卖家中心。在卖家中心中点击【店铺装修】。
2、然后在店铺装修页面，找到左侧基础模块中的【图片轮播】，鼠标左键按住它，将它拖动到右侧需要添加图片轮播的空白位置。
3、在空白处松开鼠标。
4、然后就可以看到添加的图片轮播模块，默认图片是白雪松树画面。
5、点击右上角的【编辑】。
6、在内容设置里面，可以看到图片地址。那么，图片地址在哪里呢。需要特别注意，首先需要把图片轮播的图片素材放到店铺的图片空间里面哦。这是淘宝规则之一。
7、那么，我们回到当初的卖家中心，点击左边店铺管理里面的【图片空间】。
8、然后找到图片轮播素材图片，点击其中一个图片，右击选择【属性】。
9、然后在回到装修页面，将刚才复制的图片地址粘贴。
10、然后点击【保存】。
11、然后就可以看到保存后的效果了。
12、这只是添加了一张图片啊，图片轮播当然要添加多张图片，怎么继续添加轮播图片。仍然点击右上角的【编辑】。
13、然后找到添加。接下来的步骤就是继续添加另外图片地址了。