                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /焦點(diǎn)圖輪播特效

點(diǎn)擊圖片不滾動(dòng)

<!DOCTYPE ?HTML>

<html >

<head>

#nav{width:1600px; height:1000px; margin:0 auto;}

#divBackground{no-repeat;z-index:-1;position: absolute;}

#na{width:892px; height:30px; background-color: #0aa6d6; margin-left:300px;}

*{margin: 0px; padding: 0px;}

#na ul{list-style: none;}

#na ul li{float: left; line-height: 30px; text-align: center; position: relative;}

#na a{text-decoration: none; color: #000; display: block; padding: 0 10px;}

#na a:hover{color: #fff; background-color: #b3aebb;}

#na ul li ul li{float: none; background-color: #0aa6d6; margin-top: 2px;font-size: 10px; width: 85px; z-index:9999;}

#na ul li ul {position: absolute; left: 0px;top: 30px;display: none;}

#na ul li ul li a:hover{background-color: #b3aebb;}

#na ul li:hover ul{display: block;}

#h{width: 892px; height: 300px; background-color: #B3AEBB; margin-left:300px; overflow: hidden; position: relative;}

#list{width: 890px; height: 300px; z-index: 1; overflow: hidden;}

#list img{float: left; width: 890px; height: 300px;}

/*#buttons{position: absolute; height: 10px; width: 100px; bottom: 20px; left: 250px; z-index: 2;}

#buttons span{margin: auto; cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}

#buttons .on{background: orangered;}*/

.arrow{cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 25px; font-weight: bold; border-radius: 50%; width: 35px; height: 35px; position: absolute; z-index: 2; top: 140px; background: #B3AEBB;}

.arrow:hover {background-color: #302d2d;}

#h:hover .arrow{display: block;}

#h a{text-decoration: none; color: white;}

#prev{left: 20px;}

#next{right: 20px;}

</style>

function showsubmenu(li){

var submenu=li.getElementsByTagName("ul")[0];

submenu.style.display="block";

}

function hidesubmenu(li){

var submenu=li.getElementsByTagName("ul")[0];

submenu.style.display="none";

}

window.onload=function(){

var h=document.getElementById('h');

var list=document.getElementById('list');

var prev=document.getElementById('prev');

var next=document.getElementById('next');

function animate(offset){

list.style.left=parseInt(list.style.left)+offset+'px';

}

next.onclick=function(){

animate(-3000);

}

prev.onclick=function(){

animate(3000);

}

</script>

</head>

<body>

? ? ? ? ? ? <img src="img/sky.jpg" style="width:100%;height:100%">

? ? ? ? </div>

? ? ? ? <div class="head">

<input type="submit" style="background:url(img/search.png); width: 24px; height: 25px; float: right; margin-right: -193px; margin-top: 50px; " value=""/> ? ?

</div>

<ul>

<ul>

</ul>

</li>

? ? ?<ul>

<li><a href="#">國家教育文件</a></li>

<li><a href="#">教育管理文件</a></li>

<li><a href="#">獎(jiǎng)貸管理文件</a></li>

</ul>

</li>

<ul>