用banner隱藏超出部分的圖片,imageList是inline,要顯示的話就float到標(biāo)簽位置。
公司主營(yíng)業(yè)務(wù):成都網(wǎng)站制作、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化,感謝他們對(duì)我們的高要求,感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn),讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出息烽免費(fèi)做網(wǎng)站回饋大家。
function?changeTo(num){?
var?goLeft?=?num?*?800;
$(".imgList").animate({left:?"-"?+?goLeft?+?"px"},500);
$(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
}
//創(chuàng)建一個(gè)定時(shí)器,然后再調(diào)用這個(gè)定時(shí)器,讓定時(shí)器去執(zhí)行播放圖片
var?autoChange?=?setInterval(function?()?{
if(index3){
index++
}else?{
index=0
}
changeTo(index)
},1000);
需求 :使圖片能夠進(jìn)行輪播滾動(dòng),到最后一張圖片時(shí)返回第一張(或第一張向前到最后一張)。
思路 :在兩端的圖片前后添加一個(gè)虛擬鏡像,當(dāng)切換到鏡像時(shí),返回到所對(duì)應(yīng)的真實(shí)圖片。
方案 :
1.通過(guò)浮動(dòng)或絕對(duì)定位使圖片水平排列。
2.頁(yè)面打開后將圖片的第一張與最后一張的克隆鏡像分別放到最后一張的后面和第一張的前面。
3.當(dāng)點(diǎn)擊翻頁(yè)按鈕時(shí),將圖片整體向左(右)移動(dòng)圖片寬度的距離,并且對(duì)當(dāng)前顯示的圖片位置進(jìn)行判斷,當(dāng)移動(dòng)到鏡像位置時(shí)將鏡像位置替換為實(shí)際圖片位置。
4.當(dāng)圖片移動(dòng)時(shí),在圖片下方的頁(yè)碼也隨之改變,并且對(duì)每一個(gè)頁(yè)碼綁定點(diǎn)擊事件,當(dāng)點(diǎn)擊頁(yè)碼時(shí),跳轉(zhuǎn)到對(duì)應(yīng)的圖片。
5.優(yōu)化:當(dāng)翻頁(yè)動(dòng)畫未完成時(shí),多次點(diǎn)擊翻頁(yè),會(huì)使程序出錯(cuò)。
每次點(diǎn)擊時(shí)進(jìn)行判斷,動(dòng)畫完成前的點(diǎn)擊無(wú)效。
*{??
margin:?0;??
padding:?0;??
}??
ul{??
list-style:none;??
}??
.slideShow{??
width:?620px;??
height:?700px;?????/*其實(shí)就是圖片的高度*/??
border:?1px?#eeeeee?solid;??
margin:?100px?auto;??
position:?relative;??
overflow:?hidden;????/*此處需要將溢出框架的圖片部分隱藏*/??
}??
.slideShow?ul{??
width:?2500px;??
position:?relative;?????/*此處需注意relative?:?對(duì)象不可層疊,但將依據(jù)left,right,top,bottom等屬性在正常文檔流中偏移位置,如果沒有這個(gè)屬性,圖片將不可左右移動(dòng)*/??
}??
.slideShow?ul?li{??
float:?left;?????/*讓四張圖片左浮動(dòng),形成并排的橫著布局,方便點(diǎn)擊按鈕時(shí)的左移動(dòng)*/??
width:?620px;??
}??
.slideShow?.showNav{?????/*用絕對(duì)定位給數(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();????????????????????????????????????????//獲取每個(gè)圖片的寬度??????????
var?timer=null;?????????????????????????????????????????????????????????????????????????????????????//定時(shí)器返回值,主要用于關(guān)閉定時(shí)器??????????
var?iNow=0;?????????????????????????????????????????????????????????????????????????????????????????//iNow為正在展示的圖片索引值,當(dāng)用戶打開網(wǎng)頁(yè)時(shí)首先顯示第一張圖,即索引值為0??????????????????
showNumber.on("click",function(){??????????????????????????????????????????????????????//為每個(gè)按鈕綁定一個(gè)點(diǎn)擊事件???????????????????
$(this).addClass("active").siblings().removeClass("active");??????????????????//按鈕點(diǎn)擊時(shí)為這個(gè)按鈕添加高亮狀態(tài),并且將其他按鈕高亮狀態(tài)去掉??????????????
var?index=$(this).index();????????????????????????????????????????????????????????????????//獲取哪個(gè)按鈕被點(diǎn)擊,也就是找到被點(diǎn)擊按鈕的索引值??????????????
iNow=index;??????????????
ul.animate({????"left":-oneWidth*iNow,???????????????????????????????//注意此處用到left屬性,所以u(píng)l的樣式里面需要設(shè)置position:?relative;?讓ul左移N個(gè)圖片大小的寬度,N根據(jù)被點(diǎn)擊的按鈕索引值iNOWx確定????????????
})????????
});?????????????????
function?autoplay(){??????
timer=setInterval(function(){??????????????????????????????????????????????//打開定時(shí)器?????????????
iNow++;?????????????????????????????????????????????????????????????????????????//讓圖片的索引值次序加1,這樣就可以實(shí)現(xiàn)順序輪播圖片?????????????
if(iNowshowNumber.length-1){??????????????????????????????????????//當(dāng)?shù)竭_(dá)最后一張圖的時(shí)候,讓iNow賦值為第一張圖的索引值,輪播效果跳轉(zhuǎn)到第一張圖重新開始??????????????????
iNow=0;?}??????????????
showNumber.eq(iNow).trigger("click");??????????????????????????????????//模擬觸發(fā)數(shù)字按鈕的click??????????
},2000);??????????????????????????????????????????????????????????????????????//2000為輪播的時(shí)間??
}?????
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
對(duì)于一位合格的前端開發(fā)人員來(lái)說(shuō),首頁(yè)圖片輪播可謂是必會(huì)的基本功。那么我們聊一聊如何用jquery封裝自己的輪播插件。
首先必須要聊到的jquery為我們提供的兩大擴(kuò)展方法,$.fn和$.extend(),$.extend相當(dāng)于為jQuery類(注意,JavaScript并沒有類,我們只是以類來(lái)理解這種做法)添加靜態(tài)方法,
$.fn其實(shí)就是jQuery.prototype,原型,對(duì)于新手比較難解的概念,可以簡(jiǎn)單的理解為,我更改了印章,印章印出來(lái)的每個(gè)印記都會(huì)受到印章的影響,可謂釜底抽薪,JavaScript原型鏈相對(duì)較為復(fù)雜,JavaScript的繼承特性便是基于原型實(shí)現(xiàn)的,在編寫大規(guī)模的JavaScript代碼的時(shí)候,以面向?qū)ο蟮姆绞骄帉懖艜?huì)顯得有價(jià)值,我們?cè)诖瞬毁樖觥?/p>
好了,我們有了上述的知識(shí)儲(chǔ)備,我們開始編寫輪播插件。
[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),需要一個(gè)向左,一個(gè)向右按鈕和對(duì)應(yīng)輪播圖片數(shù)目的icon按鈕,建議大家用a標(biāo)簽設(shè)置圖片的容器,比較好操作。
CSS我就不貼了,之后我會(huì)將其上傳。
最重要的是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中的樣式對(duì)應(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();
});
//每個(gè)icon分配事件
$(this).find(".slider_icon").on("click", "span", function() {
var index = $(this).index();
opts.index = index;
core();
});
//定時(shí)器
var start = function() {
opts.timer = setInterval(function() {
++opts.index;
core();
}, opts.speed);
}
$(this).hover(function() {
clearInterval(opts.timer);
}, function() {
start();
});
start();
}
}(jQuery));
1:core方法,其實(shí)圖片輪播的本質(zhì)就是把當(dāng)前索引的圖片顯示,導(dǎo)航icon高亮,其余的隱藏,我做的是淡入淡出。
2:向左,向右,導(dǎo)航其實(shí)無(wú)非就是index的改變,jquery提供了一個(gè)index()方法,可以獲得所有匹配元素中當(dāng)前元素的索引,從0開始。
3:定時(shí)器,要實(shí)現(xiàn)圖片的自動(dòng)導(dǎo)航,無(wú)非就是每隔一定的時(shí)間,index+1。另外,當(dāng)鼠標(biāo)放入的時(shí)候,要清楚定時(shí)器,當(dāng)輸入移出的時(shí)候,再開啟定時(shí)器。
分享標(biāo)題:jquery的輪播圖,jquery簡(jiǎn)單輪播圖
瀏覽路徑:http://m.rwnh.cn/article12/phpogc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、品牌網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)