第一個(gè)問題? 關(guān)于布局的疑問就是 ?我是用一個(gè)div相對(duì)定位,里面再有一個(gè)div絕對(duì)定位,放鏈接圖片,然后就是外面的div設(shè)置了一張圖片顯示的寬度,其他隱藏,但還是出現(xiàn)上一張圖片的邊緣,想了許久沒有搞懂為什么?第二個(gè)問題? 關(guān)于點(diǎn)擊按鈕的我測試了下,再不添加showbutton這個(gè)函數(shù)時(shí),圖片是可以無限循環(huán)滾動(dòng)的,加上瀏覽器報(bào)錯(cuò)也是提示showbutton函數(shù)最后的if判斷和最后一句出現(xiàn) undefriend好像,不過還是沒查出個(gè)所以然,所以請(qǐng)求哪位大神幫我看下以下是html代碼????????? <div id="img_box" >??????????????????? <div class="img_banner" id="img_banner" style="left:-730px;">??????????????????????? <a href="#"><img src="images/banner5.jpg"></a>??????????????????????? <a href="#"><img src="images/banner1.jpg"></a>??????????????????????? <a href="#"><img src="images/banner2.jpg"></a>??????????????????????? <a href="#"><img src="images/banner3.jpg"></a>??????????????????????? <a href="#"><img src="images/banner4.jpg"></a>??????????????????????? <a href="#"><img src="images/banner5.jpg"></a>??????????????????????? <a href="#"><img src="images/banner1.jpg"></a>?????????????????? </div>?????????????????? <!--上一張和下一張的按鈕-->????????????????? <div id="page">???????????????????????? <a href="#" id="perv"><</a>???????????????????????? <a href="#" id="next">></a>????????????????? </div>????????????????? <!--1至5的頁簽按鈕-->????????????????? <div id="button">?????????????????????? <a href="#" id="1" class="on">1</a>?????????????????????? <a href="#" id="2">2</a>?????????????????????? <a href="#" id="3">3</a>?????????????????????? <a href="#" id="4">4</a>?????????????????????? <a href="#" id="5">5</a>????????????????? </div>?????????? </div>css代碼(出問題的這一部分)#img_box{?? ????????????? width:730px;?? ??? ??? ??? ? height:454px;?? ??? ??? ??? ? overflow:hidden;?? ??? ??? ??? ? position:relative; ?? ??? ??? ??? ? float:left;?? ??? ??? ??? ? z-index:2;?? ??? ??? ??? ? margin:12px;?? ??? ??? ??? ? margin-right:0px;}.img_banner{?? ???????????? width:5110px;?? ??? ??? ??? ?height:454px;?? ??? ??? ??? ?position:absolute;?? ??? ??? ??? ?z-index:3;}js代碼window.onload = function(){???????????? var imgbox = document.getElementById('imgbox');?? ??? ??? ? var list = document.getElementById('img_banner');?? ??? ??? ? var perv = document.getElementById('perv');?? ??? ??? ? var next = document.getElementById('next');?? ??? ??? ? var buttons = document.getElementById('button').getElementsByTagName('a');?? ??? ??? ? var index =1;?? ? ?? ??? ??? ????? function showbutton(){?? ??? ??? ??? ???? for(i=0; i<buttons.length; i++){?? ??? ??? ??? ??? ?????? if(buttons[i].className = "on"){?? ??? ??? ??? ??? ??? ??? ?? buttons[i].className ="";?? ??? ??? ??? ??? ??? ?? }?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?}?? ??? ??? ??? ? ??? ?buttons[ index - 1 ].className ="on";????? 谷歌就是這里報(bào)錯(cuò)?? ??? ???? }?? ????????? //封裝成一個(gè)函數(shù),并給它傳入一個(gè)參數(shù)?? ??? ??? ? function animate(off){?? ??? ??? ??? ?????? var newleft =? parseInt(list.style.left) +off;?? ??? ??? ??? ??? ?? alert(newleft);?? ?????????????????? list.style.left =? newleft+'px';?? ??? ??? ??? ??? ? ??? ??? ??? ??? ??? ? ??? ??? ??? ??? ??? ?? if(newleft > -730){?? ??? ??? ??? ??? ??? ? list.style.left = -3650 +"px"; ??? ??? ??? ??? ??? ?? }?? ??? ??? ??? ??? ?? if(newleft <-3650){?? ??? ??? ??? ??? ??? ? list.style.left = -730 +"px"; ??? ??? ??? ??? ??? ?? }?? ??? ??? ? }?????????????? ??? ??? ??? ??? ? ??? ??? ??? ?next.onclick = function(){?? ??? ??? ??? ?????? index += 1;?? ??? ??? ??? ??? ?? showbutton();?? ??? ??? ????? ??? ?????????????????? animate(-730);?? ??? ??? ??? ??? ?? return false;?? ??? ??? ? }?? ??? ??? ? perv.onclick = function(){?? ??? ??? ??? ?????? index -= 1;?? ??? ??? ??? ??? ?? showbutton();?? ?????????????????? animate(730);?? ??? ??? ??? ??? ?? return false; ?? ??? ?? }? ??? ??? ??? ?? }
關(guān)于焦點(diǎn)輪播圖的布局疑問和點(diǎn)擊bug
前端林小白
2016-04-13 22:17:46