第一張顯示沒問題，第二張以及之后的圖片顯示為空白。
站在用戶的角度思考問題，與客戶深入溝通，找到聞喜網(wǎng)站設(shè)計與聞喜網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名申請、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋聞喜地區(qū)。
首先，排除掉圖片路徑?jīng)]問題。（如果有問題，也不會網(wǎng)上提問了）
初步判斷，css靜態(tài)定位錯誤。
css樣式固定在了第一張圖片，第二，第三之后的css定位不到，則顯示空白。
即使在js中是動態(tài)定位的，但是請仔細檢查你的圖片ul的css的定位參數(shù)是否固定住了。
比如，設(shè)置了{left：0；}。
刪除掉css的錯誤靜態(tài)定位，只保留js中的動態(tài)定位可以解決第二張以及之后圖片空白問題。
1、html部分
body
div?id="banner"????
div?id="banner_bg"/div!--標題背景--
div?id="banner_info"/div!--標題--
ul
li?class="on"1/li
li2/li
li3/li
li4/li
/ul
div?id="banner_list"
a?href="#"?target="_blank"img?src="imgs/p1.jpg"?title="橡樹小屋的blog"?alt="橡樹小屋的blog"http://a
a?href="#"?target="_blank"img?src="imgs/p5.jpg"?title="橡樹小屋的blog"?alt="橡樹小屋的blog"http://a
a?href="#"?target="_blank"img?src="imgs/p3.jpg"?title="橡樹小屋的blog"?alt="橡樹小屋的blog"http://a
a?href="#"?target="_blank"img?src="imgs/p4.jpg"?title="橡樹小屋的blog"?alt="橡樹小屋的blog"http://a
/div
/div
/body
2、css樣式部分
style?type="text/css"
#banner?{position:relative;?width:478px;?height:286px;?border:1px?solid?#666;?overflow:hidden;}
#banner_list?img?{border:0px;}
#banner_bg?{position:absolute;?bottom:0;background-color:#000;height:30px;filter:?Alpha(Opacity=30);opacity:0.3;z-index:1000;
cursor:pointer;?width:478px;}
#banner_info{position:absolute;?bottom:0;?left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#banner_text?{position:absolute;width:120px;z-index:1002;?right:3px;?bottom:3px;}
#banner?ul?{position:absolute;list-style-type:none;filter:?Alpha(Opacity=80);opacity:0.8;?border:1px?solid?#fff;z-index:1002;
margin:0;?padding:0;?bottom:3px;?right:5px;}
#banner?ul?li?{?padding:0px?8px;float:left;display:block;color:#FFF;border:#e5eaff?1px?solid;background:#6f4f67;cursor:pointer}
#banner?ul?li.on?{?background:#900}
#banner_list?a{position:absolute;}?!--?讓四張圖片都可以重疊在一起--
/style
3、jQuery部分
script?type="text/javascript"
var?t?=?n?=0,?count;
$(document).ready(function(){????
count=$("#banner_list?a").length;
$("#banner_list?a:not(:first-child)").hide();
$("#banner_info").html($("#banner_list?a:first-child").find("img").attr('alt'));
$("#banner_info").click(function(){window.open($("#banner_list?a:first-child").attr('href'),?"_blank")});
$("#banner?li").click(function()?{
var?i?=?$(this).text()?-1;//獲取Li元素內(nèi)的值，即1，2，3，4
n?=?i;
if?(i?=?count)?return;
$("#banner_info").html($("#banner_list?a").eq(i).find("img").attr('alt'));
$("#banner_info").unbind().click(function(){window.open($("#banner_list?a").eq(i).attr('href'),?"_blank")})
$("#banner_list?a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementById("banner").style.background="";
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
});
t?=?setInterval("showAuto()",?4000);
$("#banner").hover(function(){clearInterval(t)},?function(){t?=?setInterval("showAuto()",?4000);});
})
function?showAuto()
{
n?=?n?=(count?-1)??0?:?++n;
$("#banner?li").eq(n).trigger('click');
}
/script
*{??
margin:?0;??
padding:?0;??
}??
ul{??
list-style:none;??
}??
.slideShow{??
width:?620px;??
height:?700px;?????/*其實就是圖片的高度*/??
border:?1px?#eeeeee?solid;??
margin:?100px?auto;??
position:?relative;??
overflow:?hidden;????/*此處需要將溢出框架的圖片部分隱藏*/??
}??
.slideShow?ul{??
width:?2500px;??
position:?relative;?????/*此處需注意relative?:?對象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置，如果沒有這個屬性，圖片將不可左右移動*/??
}??
.slideShow?ul?li{??
float:?left;?????/*讓四張圖片左浮動，形成并排的橫著布局，方便點擊按鈕時的左移動*/??
width:?620px;??
}??
.slideShow?.showNav{?????/*用絕對定位給數(shù)字按鈕進行布局*/??
position:?absolute;??
right:?10px;??
bottom:?5px;??
text-align:center;??
font-size:?12px;??????
line-height:?20px;??
}??
.slideShow?.showNav?span{??
cursor:?pointer;??
display:?block;??
float:?left;??
width:?20px;??
height:?20px;??
background:?#ff5a28;??
margin-left:?2px;??
color:?#fff;??
}??
.slideShow?.showNav?.active{??
background:?#b63e1a;??
}??
js代碼規(guī)范：
script?src="../../../jQuery/js/jquery-2.1.4.js"/script?script?type="text/javascript"??
$(document).ready(function(){??????
var?slideShow=$(".slideShow"),????????????????????????????????????????????????????????????????????//獲取最外層框架的名稱?????
ul=slideShow.find("ul"),???????????????
showNumber=slideShow.find(".showNav?span"),??????????????????????????????????????????????//獲取按鈕??????????
oneWidth=slideShow.find("ul?li").eq(0).width();????????????????????????????????????????//獲取每個圖片的寬度??????????
var?timer=null;?????????????????????????????????????????????????????????????????????????????????????//定時器返回值，主要用于關(guān)閉定時器??????????
var?iNow=0;?????????????????????????????????????????????????????????????????????????????????????????//iNow為正在展示的圖片索引值，當用戶打開網(wǎng)頁時首先顯示第一張圖，即索引值為0??????????????????
showNumber.on("click",function(){??????????????????????????????????????????????????????//為每個按鈕綁定一個點擊事件???????????????????
$(this).addClass("active").siblings().removeClass("active");??????????????????//按鈕點擊時為這個按鈕添加高亮狀態(tài)，并且將其他按鈕高亮狀態(tài)去掉??????????????
var?index=$(this).index();????????????????????????????????????????????????????????????????//獲取哪個按鈕被點擊，也就是找到被點擊按鈕的索引值??????????????
iNow=index;??????????????
ul.animate({????"left":-oneWidth*iNow,???????????????????????????????//注意此處用到left屬性，所以ul的樣式里面需要設(shè)置position:?relative;?讓ul左移N個圖片大小的寬度，N根據(jù)被點擊的按鈕索引值iNOWx確定????????????
})????????
});?????????????????
function?autoplay(){??????
timer=setInterval(function(){??????????????????????????????????????????????//打開定時器?????????????
iNow++;?????????????????????????????????????????????????????????????????????????//讓圖片的索引值次序加1，這樣就可以實現(xiàn)順序輪播圖片?????????????
if(iNowshowNumber.length-1){??????????????????????????????????????//當?shù)竭_最后一張圖的時候，讓iNow賦值為第一張圖的索引值，輪播效果跳轉(zhuǎn)到第一張圖重新開始??????????????????
iNow=0;?}??????????????
showNumber.eq(iNow).trigger("click");??????????????????????????????????//模擬觸發(fā)數(shù)字按鈕的click??????????
},2000);??????????????????????????????????????????????????????????????????????//2000為輪播的時間??
}?????
autoplay();?????
slideShow.hover(?function(){clearInterval(timer);},autoplay);?????另外注意setInterval的用法比較關(guān)鍵。??
})??
/script??
主體代碼：
[html]?view?plain?copy?print?
body??
div?class="slideShow"??
!--圖片布局開始--??
ul??
lia?href="#"img?src="images/view/111.jpg"http://a/li??
lia?href="#"img??src="images/view/112.jpg"?//a/li??
lia?href="#"img?src="images/view/113.jpg"?//a/li??
lia?href="#"img??src="images/view/114.jpg"?//a/li??
/ul??
!--圖片布局結(jié)束--??
!--按鈕布局開始--??
div?class="showNav"??
span?class="active"1/span??
span2/span??
span3/span??
span4/span??
/div??
!--按鈕布局結(jié)束--??
/div??
/body
建議，在當前輪播圖的div添加類active，設(shè)置.active {display：block；}，.ban{display:none;};這樣可以通過添加或移除active就可以了；這樣以下就比較方便很多，要不然又要做循環(huán)，麻煩（swiper插件做輪播效果不錯）
$(".left").click(function(){
var $index = $(".ban").hasClass("active").index();//獲取當前輪播圖的下標
if($index === 0 ) {//當前為第一張輪播圖
$(".ban").eq($(".ban").length-1).addClass("active)
.siblings(".ban").removeClass("active");
//這里寫成你自動切換的代碼，我這里只是一個無動態(tài)切換效果的方法
}else {
$(".ban").eq($index-1).addClass("active)
.siblings(".ban").removeClass("active");
})
$(".right").click(function(){
var $index = $(".ban").hasClass("active").index();//獲取當前輪播圖的下標
if($index === ($(".ban").length-1) ) {//當前為最后一張輪播圖
$(".ban").eq($(".ban").length-1).addClass("active)
.siblings(".ban").removeClass("active");
//這里寫成你自動切換的代碼，我這里只是一個無動態(tài)切換效果的方法
}else {
$(".ban").eq($index+1).addClass("active)
.siblings(".ban").removeClass("active");
})
//大體思路是這樣了，代碼可能有個別字母寫得不對，畢竟是手敲的，但是大概思路是這樣了
輪播的原理是改變圖中ul的left值或者right值 以下代碼供你參考
HTML
CSS
JS代碼
注意此處沒有做臨界驗證? ?只是原理
使用 setInterval 方法即可設(shè)定輪播圖檔時間
setInterval() 方法可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式。
setInterval() 方法會不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。
語法
setInterval(code,millisec)
code
要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
millisec 周期性執(zhí)行或調(diào)用 code 之間的時間間隔，以毫秒計。
實例
html
body
input type="text" id="clock" size="35" /
script language=javascript
var int=self.setInterval("clock()",50)
function clock()
{
var t=new Date()
document.getElementById("clock").value=t
}
/script
/form
button onclick="int=window.clearInterval(int)"
Stop interval/button
/body
/html
重慶分公司
重慶分公司
