⑴ 如何用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、然後找到添加。接下來的步驟就是繼續添加另外圖片地址了。