                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

來康康我的代碼（滑稽）

<!DOCTYPE?html>
<html>
<head>
?????<meta?charset="utf-8"?/>
????????<title>輪播</title>
????????<style?type="text/css">
*?{?margin:?0;?padding:?0;?font-family:?微軟雅黑;?}
ul,ol,li?{?list-style-type:?none;?}
a,img?{?text-decoration:?none;?border:?noen;?}
#banner?{?width:?400px;?height:?280px;?border:?1px?solid?black;?position:?fixed;?top:?0;?bottom:?0;?left:?0;?right:?0;?margin:?auto;?}
#banner?.hd?{?width:?100%;?height:?50px;?background-color:?black;?line-height:?50px;?overflow:?hidden;?}
#banner?.hd?ul?li?{?display:?inline-block;?width:?25%;?height:?50px;?color:?white;?text-align:?center;?float:?left;?cursor:?pointer;?}
#banner?.hd?ul?li.on?{?background-color:?red;?}
#banner?.bd?{?width:?100%;?height:?230px;?line-height:?230px;?overflow:?hidden;?}
#banner?.bd?ul?{?display:?block;?height:?100%;?width:?100%;?overflow:?hidden;?transition:?all?cubic-bezier(0.65,?-0.21,?0.45,?0.94)?.3s;?}
#banner?.bd?ul?li?{?display:?block;?width:?100%;?background-color:?#EEE;?text-align:?center;?font-size:?24px;?font-weight:?bold;?}
</style>
????</head>
????
????<body>
?????<div?id="banner">
?????????<div?class="hd"><ul></ul></div>
????????????<div?class="bd">
?????????????<ul>
?????????????????<li>第一個</li>
????????????????????<li>第二個</li>
????????????????????<li>第三個</li>
????????????????????<li>第四個</li>
????????????????</ul>
????????????</div>
????????</div>
????????<a?href="javascript:void(0)"?onClick="alert(p)">查看初始變量</a>
????????<script?type="text/javascript">
//?獲取輪播圖標簽
var?banner?=?document.getElementById("banner");
var?baSon?=?banner.childNodes;
//?獲取滾動焦點div
var?bahd;
for(var?i?=?0;?i?<?baSon.length;?i++){
if(baSon[i].className?==?"hd"){
bahd?=?baSon[i];
};
};
//?獲取滾動焦點ul
var?bahdul?=?bahd.childNodes;
var?hdul;
for(var?i?=?0;?i?<?bahdul.length;?i++){
if(bahdul[i].nodeName?==?"UL"){
hdul?=?bahdul[i];
};
};
//?獲取內容滾動div
var?babd;
for(var?i?=?0;?i?<?baSon.length;?i++){
if(baSon[i].className?==?"bd"){
babd?=?baSon[i];
};
};
//?獲取內容滾動ul
var?babdul?=?babd.childNodes;
var?dbul;
for(var?i?=?0;?i?<?babdul.length;?i++){
if(babdul[i].nodeName?==?"UL"){
dbul?=?babdul[i];
};
};
//?獲取內容滾動li并清除空格以及其他節點
var?dbulli?=?dbul.childNodes;
for(var?i?=?0;?i?<?dbulli.length;?i++){
if(dbulli[i].nodeType?!=?1){
dbul.removeChild(dbulli[i]);
};
};
//?計算ul與li寬度
var?dbulwid?=?0;
for(var?i?=?0;?i?<?dbulli.length;?i++){
dbulwid?+=?dbulli[i].offsetWidth;
dbulli[i].setAttribute("off",i);
};
dbul.style.width?=?dbulwid?+?"px";
var?dbliwid?=?(dbulwid/dbulli.length);
for(var?i?=?0;?i?<?dbulli.length;?i++){
dbulli[i].style.width?=?dbliwid?+?"px";
dbulli[i].style.float?=?"left";
};
//?在滾動焦點插入相應數量的li
for(var?i?=?1;?i?<=?dbulli.length;?i++){
var?banhdli?=?document.createElement("li");
banhdli.innerHTML?=?i;
banhdli.setAttribute("on",i-1);
hdul.insertBefore(banhdli,hdul.childNodes[i]);
};
//?獲取滾動焦點li并清除空格以及其他節點
var?hdulli?=?hdul.childNodes;
for(var?i?=?0;?i?<?hdulli.length;?i++){
if(hdulli[i].nodeType?!=?1){
hdul.removeChild(hdulli[i]);
};
};
//?定義初始位置
hdulli[0].className?=?"on";
//?自動播放
var?p?=?0;
function?banplay(){
p++;
for(var?i?=?0;?i?<?hdulli.length;?i++){
hdulli[i].className?=?"";
};
if(p?>=?hdulli.length){
p?=?0;
};
hdulli[p].className?=?"on";
dbul.style.marginLeft?=?"-"?+?p*dbliwid?+?"px";
};
var?d?=?setInterval(banplay,3000);
//?點擊進行輪播函數
for(var?i?=?0;?i?<?hdulli.length;?i++){
hdulli[i].onclick?=?function?(){
clearInterval(d);
for(var?i?=?0;?i?<?hdulli.length;?i++){
hdulli[i].className?=?"";
};
this.className?=?"on";
for(var?i?=?0;?i?<?hdulli.length;?i++){
if(hdulli[i].className?==?"on"){
if(hdulli[i].getAttribute?=?i){
dbul.style.marginLeft?=?"-"?+?i*dbliwid?+?"px";
};
}else?if(hdulli[0].className?==?"on"){
dbul.style.marginLeft?=?0;
};
};
var?vii?=?0;
for(var?i?=?0;?i?<?hdulli.length;?i++){
if(hdulli[i].className?==?"on"){
vii?=?hdulli[i].getAttribute;
};
};
p?=?vii;
d?=?setInterval(banplay,3000);
};
};
</script>
????</body>
</html>