jquery圖片輪播思路

使用jQuery做輪播圖是網(wǎng)頁特效中很常見的一個特效。

創(chuàng)新互聯(lián)主營海鹽網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP軟件開發(fā),海鹽h5微信小程序搭建,海鹽網(wǎng)站營銷推廣歡迎海鹽等地區(qū)企業(yè)咨詢

工具原料：編輯器、瀏覽器、jQuery

1、實現(xiàn)的總體思路：

首先是初始化部分：將除了第一張輪播圖片意外的圖片都隱藏，并且隱藏向前、向后按鈕，使第一個索引按鈕處于激活狀態(tài)。

2、實現(xiàn)的具體事件處理思路：

事件部分：通過jquery的hover()綁定鼠標(biāo)上懸以及離開時的事件處理， jquery的bind()方法綁定鼠標(biāo)點擊事件處理向前、向后翻動、輪播控制：pre(), next(), play(), start()開始自動輪播，stop()停止自動輪播。

3、簡單的代碼示例如下：

!DOCTYPE?html?

html?

head?

meta?charset="UTF-8"?

titlejquery輪播效果圖?/title?

script?type="text/javascript"?src="scripts/jquery-1.9.1.js"/script?

style?type="text/css"?

*?{?

padding:?0px;?

margin:?0px;?

}?

a?{?

text-decoration:?none;?

}?

ul?{?

list-style:?outside?none?none;?

}?

.slider,?.slider-panel?img,?.slider-extra?{?

width:?650px;?

height:?413px;?

}?

.slider?{?

text-align:?center;?

margin:?30px?auto;?

position:?relative;?

}?

.slider-panel,?.slider-nav,?.slider-pre,?.slider-next?{?

position:?absolute;?

z-index:?8;?

}?

.slider-panel?{?

position:?absolute;?

}?

.slider-panel?img?{?

border:?none;?

}?

.slider-extra?{?

position:?relative;?

}?

.slider-nav?{?

margin-left:?-51px;?

position:?absolute;?

left:?50%;?

bottom:?4px;?

}?

.slider-nav?li?{?

background:?#3e3e3e;?

border-radius:?50%;?

color:?#fff;?

cursor:?pointer;?

margin:?0?2px;?

overflow:?hidden;?

text-align:?center;?

display:?inline-block;?

height:?18px;?

line-height:?18px;?

width:?18px;?

}?

.slider-nav?.slider-item-selected?{?

background:?blue;?

}?

.slider-page?a{?

background:?rgba(0,?0,?0,?0.2);?

filter:?progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);?

color:?#fff;?

text-align:?center;?

display:?block;?

font-family:?"simsun";?

font-size:?22px;?

width:?28px;?

height:?62px;?

line-height:?62px;?

margin-top:?-31px;?

position:?absolute;?

top:?50%;?

}?

.slider-page?a:HOVER?{?

background:?rgba(0,?0,?0,?0.4);?

filter:?progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);?

}?

.slider-next?{?

left:?100%;?

margin-left:?-28px;?

}?

/style?

script?type="text/javascript"?

$(document).ready(function()?{?

var?length,?

currentIndex?=?0,?

interval,?

hasStarted?=?false,?//是否已經(jīng)開始輪播?

t?=?3000;?//輪播時間間隔?

length?=?$('.slider-panel').length;?

//將除了第一張圖片隱藏?

$('.slider-panel:not(:first)').hide();?

//將第一個slider-item設(shè)為激活狀態(tài)?

$('.slider-item:first').addClass('slider-item-selected');?

//隱藏向前、向后翻按鈕?

$('.slider-page').hide();?

//鼠標(biāo)上懸時顯示向前、向后翻按鈕,停止滑動，鼠標(biāo)離開時隱藏向前、向后翻按鈕，開始滑動?

$('.slider-panel,?.slider-pre,?.slider-next').hover(function()?{?

stop();?

$('.slider-page').show();?

},?function()?{?

$('.slider-page').hide();?

start();?

});?

$('.slider-item').hover(function(e)?{?

stop();?

var?preIndex?=?$(".slider-item").filter(".slider-item-selected").index();?

currentIndex?=?$(this).index();?

play(preIndex,?currentIndex);?

},?function()?{?

start();?

});?

$('.slider-pre').unbind('click');?

$('.slider-pre').bind('click',?function()?{?

pre();?

});?

$('.slider-next').unbind('click');?

$('.slider-next').bind('click',?function()?{?

next();?

});?

/**?

*?向前翻頁?

*/

function?pre()?{?

var?preIndex?=?currentIndex;?

currentIndex?=?(--currentIndex?+?length)?%?length;?

play(preIndex,?currentIndex);?

}?

/**?

*?向后翻頁?

*/

function?next()?{?

var?preIndex?=?currentIndex;?

currentIndex?=?++currentIndex?%?length;?

play(preIndex,?currentIndex);?

}?

/**?

*?從preIndex頁翻到currentIndex頁?

*?preIndex?整數(shù)，翻頁的起始頁?

*?currentIndex?整數(shù)，翻到的那頁?

*/

function?play(preIndex,?currentIndex)?{?

$('.slider-panel').eq(preIndex).fadeOut(500)?

.parent().children().eq(currentIndex).fadeIn(1000);?

$('.slider-item').removeClass('slider-item-selected');?

$('.slider-item').eq(currentIndex).addClass('slider-item-selected');?

}?

/**?

*?開始輪播?

*/

function?start()?{?

if(!hasStarted)?{?

hasStarted?=?true;?

interval?=?setInterval(next,?t);?

}?

}?

/**?

*?停止輪播?

*/

function?stop()?{?

clearInterval(interval);?

hasStarted?=?false;?

}?

//開始輪播?

start();?

});?

/script?

/head?

body?

div?class="slider"?

ul?class="slider-main"?

li?class="slider-panel"?

a?href="

title="圖片1"?src="images/1.jpg"/a?

/li?

li?class="slider-panel"?

a?href="#"img?title="圖片2"?src="images/1.jpg"/a?

/li?

li?class="slider-panel"?

a?href="#"img?title="圖片3"?src="images/1.jpg"/a?

/li?

li?class="slider-panel"?

a?href="#"img?title="圖片4"?src="images/1.jpg"/a?

/li?

/ul?

div?class="slider-extra"?

ul?class="slider-nav"?

li?class="slider-item"1/li?

li?class="slider-item"2/li?

li?class="slider-item"3/li?

li?class="slider-item"4/li?

/ul?

div?class="slider-page"?

a?class="slider-pre"?href="javascript:;;"/a?

a?class="slider-next"?href="javascript:;;"/a?

/div?

/div?

/div?

/body?

/html

用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ù)字按鈕進(jìn)行布局*/??

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ù)竭_(dá)最后一張圖的時候，讓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圖片自動輪播怎么設(shè)置？求高手

!DOCTYPE?HTML

html

head

titleyugi/title

meta?charset=UTF-8?/

style?type="text/css"

#pic?{

width:?410px;

height:?200px;

margin:?0?auto;

margin-top:?150px;

}

#pic?#po?{

width:?370px;

overflow:?hidden;

height:?170px;

left:?20px;;

top:?10;

position:?relative;

}

#pic?#pol?{

width:?2370px;

height:?165px;

position:?absolute;

}

#pic?#num?{

width:?120px;

height:?25px;

position:?absolute;

z-index:?2;

left:?247px;

top:?140px;

}

#pic?#num?span?{

width:?10px;

margin-left:?10px;

cursor:?pointer;

font-size:?12px;

height:?20px;

float:?left;

color:?#000000;

text-align:?center;

}

#pic?#num?span.cut?{

background:?#000000;

color:?#FFFFFF;

}

img?{

width:?370px;

height:?165px;

float:?left

}

/style

script?type="text/javascript"?src="jquery-1.8.0.min.js"/script

script?type="text/javascript"

jQuery?(function?($)

{

var?CRT?=?0;

var?w?=?$?("img").width?(),?pol?=?$("#pol"),?spans?=?$?("#num?span");

spans.hover?(function?()

{

var?me?=?$?(this);

me.addClass?("cut").siblings?(".cut").removeClass?("cut");

spans.eq(CRT).clearQueue();

pol.stop?().animate?(

{

left?:?"-"?+?w?*?(CRT?=?me.index?())?+?"px"

},?"slow");

},?function()

{

anony();

});

var?anony?=?function?()

{

CRT++;

CRT?=?CRT??spans.length?-?1???0?:?CRT;

spans.eq(CRT).clearQueue().delay(1000).queue?(function()

{

spans.eq(CRT).triggerHandler?("mouseover");

anony();

});

};

anony();

});

/script

/head

body

div?id="pic"

div?id="po"

div?id="pol"

img?src="../../圖片/素材/738b4710b912c8fcbb648ccdfe039245d688211e.jpg"?/?

img?src="../../圖片/素材/9f510fb30f2442a76c08f9a4d343ad4bd11302a8.jpg"?/?

img?src="../../圖片/素材/fd039245d688d43f76f37f527e1ed21b0ef43b3c.jpg"?/?

img?src="../../圖片/素材/11385343fbf2b21154e02b29c88065380dd78e8f.jpg"?/?

img?src="../../圖片/素材/a08b87d6277f9e2f7dd1b36f1d30e924b999f3f5.jpg"?/

/div

div?id="num"

span?class="cut"?1/span?

span2/span?

span3/span?

span4/span?

span5/span

/div

/div

/div

/body

/html

jquery圖片上下輪播的問題，怎么實現(xiàn)自動輪播？

1、html部分

body

div?id="banner"????

div?id="banner_bg"/div!--標(biāo)題背景--

div?id="banner_info"/div!--標(biāo)題--

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

如何編寫jquery插件之輪播圖

對于一位合格的前端開發(fā)人員來說，首頁圖片輪播可謂是必會的基本功。那么我們聊一聊如何用jquery封裝自己的輪播插件。

首先必須要聊到的jquery為我們提供的兩大擴(kuò)展方法，$.fn和$.extend(),$.extend相當(dāng)于為jQuery類（注意，JavaScript并沒有類，我們只是以類來理解這種做法）添加靜態(tài)方法，

$.fn其實就是jQuery.prototype，原型，對于新手比較難解的概念，可以簡單的理解為，我更改了印章，印章印出來的每個印記都會受到印章的影響，可謂釜底抽薪，JavaScript原型鏈相對較為復(fù)雜，JavaScript的繼承特性便是基于原型實現(xiàn)的，在編寫大規(guī)模的JavaScript代碼的時候，以面向?qū)ο蟮姆绞骄帉懖艜@得有價值，我們在此不贅述。

好了，我們有了上述的知識儲備，我們開始編寫輪播插件。

[html] view plain copy

!DOCTYPE html

html lang="en"

head

title/title

meta charset="UTF-8"

meta name="viewport" content="width=device-width, initial-scale=1"

link href="main.css" rel="stylesheet"

script src="./js/jquery-1.10.2.min.js"/script

script src="./js/jquery.slider.js"/script

script src="./js/main.js"/script

/head

body

div class="slider"

div class="slider_img"

a class="slider-active" href="#" style="background: url(./img/nav1.jpg) 50% no-repeat; background-size: cover; opacity: 1;"/a

a href="#" style="background: url(./img/nav2.jpg) 50% no-repeat; background-size: cover;"/a

a href="#" style="background: url(./img/nav3.jpg) 50% no-repeat; background-size: cover;"/a

a href="#" style="background: url(./img/nav4.jpg) 50% no-repeat; background-size: cover;"/a

a href="#" style="background: url(./img/nav5.jpg) 50% no-repeat; background-size: cover;"/a

/div

span id="left" class="arrow-icon"/span

span id="right" class="arrow-icon"/span

div class="slider_icon"

span class="active"/span

span/span

span/span

span/span

span/span

/div

/div

/body

/html

這是HTML代碼的結(jié)構(gòu)，需要一個向左，一個向右按鈕和對應(yīng)輪播圖片數(shù)目的icon按鈕，建議大家用a標(biāo)簽設(shè)置圖片的容器，比較好操作。

CSS我就不貼了，之后我會將其上傳。

最重要的是JavaScript代碼:

[javascript] view plain copy

(function($) {

$.fn.slider = function(options) {

//this指向當(dāng)前的選擇器

var config = {

index: 0,

timer: null,

speed: 3000,

min: 0.3, //和css中的樣式對應(yīng)

max: 1

};

var opts = $.extend(config, options);

//核心方法，把當(dāng)前index的圖片和icon顯示，把除此之外的圖片和icon隱藏

var core = function() {

if (opts.index 4) {

opts.index = 0;

} else if (opts.index 0) {

opts.index = 4;

}

$(".slider_icon span").eq(opts.index).addClass("active").siblings("span").removeClass("active");

$(".slider_img a").eq(opts.index).css("display", "block").stop().animate({ "opacity": opts.max }, 1000).siblings("a").css({ "display": "none", "opacity": opts.min });

};

//左邊

$(this).find("#left").bind("click", function() {

--opts.index;

core();

});

//右邊

$(this).find("#right").bind("click", function() {

++opts.index;

core();

});

//每個icon分配事件

$(this).find(".slider_icon").on("click", "span", function() {

var index = $(this).index();

opts.index = index;

core();

});

//定時器

var start = function() {

opts.timer = setInterval(function() {

++opts.index;

core();

}, opts.speed);

}

$(this).hover(function() {

clearInterval(opts.timer);

}, function() {

start();

});

start();

}

}(jQuery));

1:core方法，其實圖片輪播的本質(zhì)就是把當(dāng)前索引的圖片顯示，導(dǎo)航icon高亮，其余的隱藏，我做的是淡入淡出。

2：向左，向右，導(dǎo)航其實無非就是index的改變，jquery提供了一個index()方法，可以獲得所有匹配元素中當(dāng)前元素的索引，從0開始。

3：定時器，要實現(xiàn)圖片的自動導(dǎo)航，無非就是每隔一定的時間，index+1。另外，當(dāng)鼠標(biāo)放入的時候，要清楚定時器，當(dāng)輸入移出的時候，再開啟定時器。

jQuery輪播圖實現(xiàn)思路

用banner隱藏超出部分的圖片，imageList是inline，要顯示的話就float到標(biāo)簽位置。

function?changeTo(num){?

var?goLeft?=?num?*?800;

$(".imgList").animate({left:?"-"?+?goLeft?+?"px"},500);

$(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");

}

//創(chuàng)建一個定時器，然后再調(diào)用這個定時器，讓定時器去執(zhí)行播放圖片

var?autoChange?=?setInterval(function?()?{

if(index3){

index++

}else?{

index=0

}

changeTo(index)

},1000);

網(wǎng)站題目：輪播jquery,輪播圖尺寸
網(wǎng)站網(wǎng)址：http://chinadenli.net/article19/dsispdh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、外貿(mào)建站、面包屑導(dǎo)航、網(wǎng)頁設(shè)計公司、、自適應(yīng)網(wǎng)站

廣告

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