如何用jquery做輪播圖

有很多可供選擇的JQ插件，比如

創新互聯公司專注為客戶提供全方位的互聯網綜合服務，包含不限于網站制作、成都網站制作、黃石港網絡推廣、微信小程序、黃石港網絡營銷、黃石港企業策劃、黃石港品牌公關、搜索引擎seo、人物專訪、企業宣傳片、企業代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創新互聯公司為所有大學生創業者提供黃石港建站搭建服務，24小時服務熱線：18980820575，官方網址：vcdvsql.cn

slider、bxslider、swipper等等，這些都是比較方便且功能強大的，例子可以參考官方的Demo

左右按鈕控制輪播圖切換，用jquery怎么寫，不用框架，代碼如下

!doctype?html

html?lang="en"

head

meta?charset="UTF-8"

titleDocument/title

style

#box?{

width:?796px;

margin:?50px?auto;

position:?relative;

height:?296px;

}

#img-box?img?{

position:?absolute;

width:?796px;

height:?305px;

}

#uls?{

position:?absolute;

width:?100%;

text-align:?center;

bottom:?0px;

list-style:?none;

margin:?0;

padding:?0;

}

#uls?li?{

width:?30px;

height:?30px;

line-height:?30px;

background:?white;

border-radius:?10px;

display:?inline-block;

}

#uls?li:first-child?{

background:?red;

}

button?{

position:?absolute;

top:?50%;

display:?none;

}

button#prev?{

left:?10px;

}

button#next?{

right:?10px;

}

/style

/head

body

div?id="box"

div?id="img-box"

img?src=""?alt=""

img?src=""?alt=""

img?src=""?alt=""

img?src=""?alt=""

img?src=""?alt=""

/div

ul?id="uls"

li1/li

li2/li

li3/li

li4/li

li5/li

/ul

button?id="prev"/button

button?id="next"/button

/div

script?src=""/script

script

var?time,?len;

var?index?=?0

len?=?$('#uls?li').length;

time?=?setInterval(slide,?1000);

$('#box').hover(function()?{

clearInterval(time);

$('#prev,#next').css('display',?'block');

},?function()?{

time?=?setInterval(slide,?1000);

$('#prev,#next').css('display',?'none');

});

$('#prev').click(function()?{

clearInterval(time);

var?len?=?$('#uls?li').length?-?1;

var?imgshowindex?=?$("#img-box?img:visible").index();

if?(imgshowindex?=?0)?{

index?=?len;

}?else?{

index?=?--imgshowindex;

}

showindeximg(index);

});

$('#next').click(function()?{

clearInterval(time);

var?imgshowindex?=?$("#img-box?img:visible").index();

index?=?++imgshowindex;

if?(index?==?len)?index?=?0;

showindeximg(index);

});

function?slide()?{

index++;

if?(index?==?len)?index?=?0;

$('#uls?li').css('background',?'white').eq(index).css('background',?'red');

$('#img-box?img').fadeOut();

$('#img-box?img').eq(index).fadeIn();

}

function?showindeximg(index)?{

$("#img-box?img").hide().eq(index).show();

$("#uls?li").css("background",?"white").eq(index).css("background",?"red");

}

/script

/body

/html

具體實現，你可以復制下來運行下。

用jquery實現圖片輪播怎么寫呢求指教

*{??

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?:?對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置，如果沒有這個屬性，圖片將不可左右移動*/??

}??

.slideShow?ul?li{??

float:?left;?????/*讓四張圖片左浮動，形成并排的橫著布局，方便點擊按鈕時的左移動*/??

width:?620px;??

}??

.slideShow?.showNav{?????/*用絕對定位給數字按鈕進行布局*/??

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代碼規范：

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;?????????????????????????????????????????????????????????????????????????????????????//定時器返回值，主要用于關閉定時器??????????

var?iNow=0;?????????????????????????????????????????????????????????????????????????????????????????//iNow為正在展示的圖片索引值，當用戶打開網頁時首先顯示第一張圖，即索引值為0??????????????????

showNumber.on("click",function(){??????????????????????????????????????????????????????//為每個按鈕綁定一個點擊事件???????????????????

$(this).addClass("active").siblings().removeClass("active");??????????????????//按鈕點擊時為這個按鈕添加高亮狀態，并且將其他按鈕高亮狀態去掉??????????????

var?index=$(this).index();????????????????????????????????????????????????????????????????//獲取哪個按鈕被點擊，也就是找到被點擊按鈕的索引值??????????????

iNow=index;??????????????

ul.animate({????"left":-oneWidth*iNow,???????????????????????????????//注意此處用到left屬性，所以ul的樣式里面需要設置position:?relative;?讓ul左移N個圖片大小的寬度，N根據被點擊的按鈕索引值iNOWx確定????????????

})????????

});?????????????????

function?autoplay(){??????

timer=setInterval(function(){??????????????????????????????????????????????//打開定時器?????????????

iNow++;?????????????????????????????????????????????????????????????????????????//讓圖片的索引值次序加1，這樣就可以實現順序輪播圖片?????????????

if(iNowshowNumber.length-1){??????????????????????????????????????//當到達最后一張圖的時候，讓iNow賦值為第一張圖的索引值，輪播效果跳轉到第一張圖重新開始??????????????????

iNow=0;?}??????????????

showNumber.eq(iNow).trigger("click");??????????????????????????????????//模擬觸發數字按鈕的click??????????

},2000);??????????????????????????????????????????????????????????????????????//2000為輪播的時間??

}?????

autoplay();?????

slideShow.hover(?function(){clearInterval(timer);},autoplay);?????另外注意setInterval的用法比較關鍵。??

})??

/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??

!--圖片布局結束--??

!--按鈕布局開始--??

div?class="showNav"??

span?class="active"1/span??

span2/span??

span3/span??

span4/span??

/div??

!--按鈕布局結束--??

/div??

/body

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實現圖片輪播的同時左右按鈕可以實現切換？

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

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

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

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

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

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

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

}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");

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

}else {

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

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

})

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

jquery圖片上下輪播的問題，怎么實現自動輪播？

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元素內的值，即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

分享標題：jquery寫輪播圖,jquery怎么寫輪播圖
文章轉載：http://vcdvsql.cn/article4/dsdisie.html

成都網站建設公司_創新互聯，為您提供軟件開發、響應式網站、關鍵詞優化、、外貿網站建設、品牌網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯