jquery 輪播問題！

var len = $(".num li").length;//獲取長度（相當(dāng)于是有多少張圖片）

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供泗縣網(wǎng)站建設(shè)、泗縣做網(wǎng)站、泗縣網(wǎng)站設(shè)計、泗縣網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、泗縣企業(yè)網(wǎng)站模板建站服務(wù)，十余年泗縣做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

var index = 0; //圖片序號

var adTimer; //定時器

//滾動廣告

$(".num li").mouseover(function() {

index = $(".num li").index(this); //獲取鼠標(biāo)懸浮 li 的index

showImg(index); //執(zhí)行滾動方法，傳index進來就是當(dāng)用戶滑到第幾張的時候就顯示第幾張

}).eq(0).mouseover();//觸發(fā)鼠標(biāo)經(jīng)過第一張，eq(0)指的是第一張

//滑入停止動畫，滑出開始動畫.

$('.banner_a').hover(function() {

clearInterval(adTimer); //當(dāng)鼠標(biāo)移動到圖片上，關(guān)掉定時器，就是不在讓圖片滾動

}, function() {

adTimer = setInterval(function() { //離開的時候開定時器，圖片繼續(xù)滾動

showImg(index) //執(zhí)行方法

index++;

if (index == len) { //最后一張圖片之后，轉(zhuǎn)到第一張

index = 0;

}

}, 1000);

}).trigger("mouseleave"); //程序進來就觸發(fā)鼠標(biāo)離開事件，即讓圖片滾動

function showImg(index) { //滾動函數(shù)

var adHeight = $(".bannerulli:first").height();

//傳index索引進來，就是當(dāng)?shù)趲讖埵髽?biāo)經(jīng)過的時候，第幾張就滾動起來，比如，鼠標(biāo)移動到第2張， $(".bannerul")的marginLeft就往左移動-adHeight * index + "px"

$(".bannerul").stop(true, false).animate({

"marginLeft":-adHeight * index + "px" //改變 marginTop 屬性的值達到輪播的效果

});

$(".num li").removeClass("on") //先把所有的li的on類名移除，再讓當(dāng)前的li添加on類名

.eq(index).addClass("on");

}

jquery自動輪播圖代碼只能出現(xiàn)一張圖片第二三張就空白了 輪播正常播放

第一張顯示沒問題，第二張以及之后的圖片顯示為空白。

首先，排除掉圖片路徑?jīng)]問題。（如果有問題，也不會網(wǎng)上提問了）

初步判斷，css靜態(tài)定位錯誤。

css樣式固定在了第一張圖片，第二，第三之后的css定位不到，則顯示空白。

即使在js中是動態(tài)定位的，但是請仔細檢查你的圖片ul的css的定位參數(shù)是否固定住了。

比如，設(shè)置了{left：0；}。

刪除掉css的錯誤靜態(tài)定位，只保留js中的動態(tài)定位可以解決第二張以及之后圖片空白問題。

jquery簡單自動輪播圖代碼怎么寫

html部分 ???? ???? this?is?the?page一???? this?is?the?page二???? this?is?the?page三???? this?is?the?page四???? ???? css部分 *{???? padding:?0;???? margin:?0;???? }???? html,body{???? height:?一00%;???? }???? #container?{???? width:?一00%;???? height:?500px;???? overflow:?hidden;???? }???? .sections,.section?{???? height:一00%;???? }???? #container,.sections?{???? position:?relative;???? }???? .section?{???? background-color:?#000;???? background-size:?cover;???? background-position:?50%?50%;???? text-align:?center;???? color:?white;???? }???? #section0?{???? background-image:?url('images/一.jpg');???? }???? #section一?{???? background-image:?url('images/二.jpg');???? }???? #section二?{???? background-image:?url('images/三.jpg');???? }???? #section三?{???? background-image:?url('images/四.jpg');???? }?? .pages?li{list-style-type:none;width:一0px;height:一0px;border-radius:一0px;background-color:white}.pages?li:hover{box-shadow:0?0?5px?二px?white}.pages?li.active{background-color:orange;box-shadow:0?0?5px?二px?orange}.pages{position:absolute;z-index:999}.pages.horizontal{left:50%;transform:translateX(-50%);bottom:5px}.pages.horizontal?li{display:inline-block;margin-right:一0px}.pages.horizontal?li:last-child{margin-right:0}.pages.vertical{right:5px;top:50%;transform:translateY(-50%)}.pages.vertical?li{margin-bottom:一0px}.pages.vertical?li:last-child{margin-bottom:0} JS部分 jquery-一.一一.0.min.js"?type="text/javascript" //引入pageSwitch.min.js 如

用jquery實現(xiàn)圖片輪播怎么寫呢求指教

*{??

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為正在展示的圖片索引值，當(dāng)用戶打開網(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){??????????????????????????????????????//當(dāng)?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

如何jQuery實現(xiàn)圖片輪播的同時左右按鈕可以實現(xiàn)切換？

建議，在當(dāng)前輪播圖的div添加類active，設(shè)置.active {display：block；}，.ban{display:none;};這樣可以通過添加或移除active就可以了；這樣以下就比較方便很多，要不然又要做循環(huán)，麻煩（swiper插件做輪播效果不錯）

$(".left").click(function(){

var $index = $(".ban").hasClass("active").index();//獲取當(dāng)前輪播圖的下標(biāo)

if($index === 0 ) {//當(dāng)前為第一張輪播圖

$(".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();//獲取當(dāng)前輪播圖的下標(biāo)

if($index === ($(".ban").length-1) ) {//當(dāng)前為最后一張輪播圖

$(".ban").eq($(".ban").length-1).addClass("active)

.siblings(".ban").removeClass("active");

//這里寫成你自動切換的代碼，我這里只是一個無動態(tài)切換效果的方法

}else {

$(".ban").eq($index+1).addClass("active)

.siblings(".ban").removeClass("active");

})

//大體思路是這樣了，代碼可能有個別字母寫得不對，畢竟是手敲的，但是大概思路是這樣了