js實(shí)現(xiàn)無(wú)縫輪播圖插件封裝
前言：頁(yè)面中輪播圖，對(duì)于一個(gè)前端開發(fā)者來(lái)說(shuō)，是最基本的技能，不論是的商城網(wǎng)站，還是企業(yè)站，輪播圖已經(jīng)成為不可缺少的一個(gè)模塊，而常見(jiàn)的輪播圖不外乎兩種，一種是漸隱漸現(xiàn)輪播圖，一種是無(wú)縫輪播圖。網(wǎng)上關(guān)于輪播圖的件也有很多，但是用人家的代碼總會(huì)出現(xiàn)各種各樣的bug，我們修改bug往往要耗費(fèi)很多時(shí)間，而且有些插件的效果還不符合我們的需求，那么我們?cè)撊绾畏庋b一個(gè)自己的輪播插件呢？這就是我們今天的任務(wù)，封裝輪播插件。
1、特效離不開合理的頁(yè)面布局，所以我們首先需要進(jìn)行頁(yè)面布局：
HTML代碼：
<div class="container mycontainer"> <div class="wrapper"> <div class="slide"> <img src="image/jd01.jpg" alt=""> </div> <div class="slide"> <img src="image/jd02.jpg" alt=""> </div> <div class="slide"> <img src="image/jd03.jpg" alt=""> </div> <div class="slide"> <img src="image/jd04.jpg" alt=""> </div> </div> <!-- 分頁(yè)器 --> <ul class="pagination"></ul> <!-- 導(dǎo)航按鈕 --> <div class="button-pre"></div> <div class="button-next"></div> </div>
2、在HTML頁(yè)面中引入css樣式文件：css樣式文件代碼如下：
CSS代碼：
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.container {
margin: 200px auto;
position: relative;
overflow: hidden;
}
.slide {
float: left;
}
img {
display: block;
}
.pagination {
width: 160px;
position: absolute;
bottom: 30px;
margin-left: -80px;
left: 50%;
}
.pagination li {
float: left;
width: 20px;
height: 20px;
background-color: blue;
margin: 0 10px;
border-radius: 50%;
}
.button-pre,
.button-next {
width: 22px;
height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
}
.button-pre {
left: 30px;
background: url('../image/left.png') no-repeat center center;
}
.button-next {
right: 30px;
background: url('../image/right.png') no-repeat center center;
}
.pagination .active {
background-color: red;
}
.mycontainer{
width: 590px;
height: 470px;
}
頁(yè)面布局完成后，接下來(lái)就是javaScript代碼，綁定事件；
在綁定事件之前，我們首先要知道無(wú)縫輪播圖的原理和一些技術(shù)關(guān)鍵點(diǎn)。
輪播圖的原理：最外層視野區(qū)域固定大小且的溢出隱藏，通過(guò)動(dòng)態(tài)控制包裹圖片的父元素的marginLeft值實(shí)現(xiàn)輪播；
關(guān)鍵點(diǎn)1：最外層的盒子container固定大小，是我們的視野區(qū)域，需要設(shè)置溢出隱藏overflow：hidden；
關(guān)鍵點(diǎn)2：所有輪播的圖片使用一個(gè)共同的父元素wrapper包裹起來(lái)；
關(guān)鍵點(diǎn)3：動(dòng)態(tài)克隆第一張圖片所在的元素silde，然后添加到最后；
關(guān)鍵點(diǎn)4：父元素wrapper的寬度為圖片個(gè)數(shù)（原始圖片個(gè)數(shù)+1，因?yàn)榭寺《嗵砑恿艘粡垐D片）乘以單獨(dú)一張圖片的寬度；
關(guān)鍵點(diǎn)5：實(shí)現(xiàn)無(wú)縫輪播的判斷條件，marginleft樣式重置時(shí)機(jī)；
關(guān)鍵點(diǎn)6：動(dòng)態(tài)生成分頁(yè)器按鈕，并設(shè)置分頁(yè)器pagination樣式；
關(guān)鍵點(diǎn)7：實(shí)現(xiàn)自動(dòng)播放和清除播放，使用計(jì)時(shí)器setInterval（）和 clearInterval（）
關(guān)鍵點(diǎn)8：實(shí)現(xiàn)代碼復(fù)用，借助面向?qū)ο蟮拈_發(fā)——構(gòu)造函數(shù)+原型對(duì)象+jQuery插件封裝機(jī)制實(shí)現(xiàn)
3、關(guān)鍵點(diǎn)梳理完之后，就可以開始javascript代碼：通過(guò)自執(zhí)行函數(shù)實(shí)現(xiàn)；需要在HTML頁(yè)面引入JS文件，JS文件代碼如下：
JS代碼：
;(function($){
// 默認(rèn)設(shè)置
var defaults = {
speed:1000,
interval:2000
}
function Banner(ele,options){
// 獲取元素對(duì)象
this.element = $(ele);
// 合并設(shè)置項(xiàng)
this.options = $.extend({},defaults,options);
// 獲取包裹圖片的父元素
this.wrapper = this.element.children().first();
// 獲取要克隆的元素
this.firstChild = this.wrapper.find('.slide:first');
// 獲取一張圖片寬度
this.Width = this.firstChild.width();
// 記錄圖片下標(biāo)
this.n = 0;
// 獲取圖片個(gè)數(shù)
this.len = this.wrapper.find('.slide').length;
// 獲取切換導(dǎo)航按鈕
this.prev = this.element.find('.button-pre');
this.next = this.element.find('.button-next');
// 獲取分頁(yè)器
this.pagination = this.element.find('.pagination');
// 計(jì)時(shí)器
this.timer = null;
}
// 初始化
Banner.prototype.init = function(){
var self = this;
(function () {
// 克隆第一張圖片并添加到元素的最后邊，設(shè)置包裹圖片父盒子的寬度
self.wrapper.append(self.firstChild.clone(true));
self.wrapper.css({ width:self.Width * (self.len + 1)});
// 生成對(duì)應(yīng)的分頁(yè)器按鈕
for(var i = 0; i < self.len; i++){
$('<li></li>').appendTo(self.pagination);
}
// 動(dòng)態(tài)設(shè)置分頁(yè)器的樣式
self.pagination.find('li:first').addClass('active');
var btnWidth = self.pagination.find('li:first').outerWidth(true) * self.len;
self.pagination.css({width:btnWidth,marginLeft:-btnWidth / 2})
})()
// 調(diào)用所有綁定的事件
this.nextClick();
this.preClick();
this.btnClick();
this.autoPlay();
this.clearPlay(this.element);
}
// 切換下一張圖片事件
Banner.prototype.nextClick = function(){
var self = this;
this.next.click(function(){
self.moveNext();
})
}
// 切換圖片，同時(shí)也為實(shí)現(xiàn)自動(dòng)播放
Banner.prototype.moveNext = function() {
this.n++;
// 判斷重置時(shí)機(jī)和重置樣式
if (this.n > this.len ) {
this.n = 1;
this.wrapper.css({ marginLeft: 0 });
}
this.changeBtn(this.n > 3 ? 0 : this.n);
this.wrapper.stop(true,true).animate({ marginLeft: -this.Width * this.n }, this.options.speed)
}
// 點(diǎn)擊切換上一張圖片
Banner.prototype.preClick = function(){
var self = this;
this.prev.click(function () {
self.n--;
if (self.n < 0) {
self.n = self.len - 1;
self.wrapper.css({ marginLeft: -(self.len) * self.Width });
}
self.changeBtn(self.n < 0 ? self.n = 3 : self.n);
self.wrapper.animate({ marginLeft: -self.Width * self.n }, self.options.speed)
})
}
// 點(diǎn)擊分頁(yè)器切換圖片
Banner.prototype.btnClick = function(){
var self = this;
this.pagination.find('li').click(function () {
var index = $(this).index();
self.n = index;
self.changeBtn(index);
self.wrapper.animate({ marginLeft: -self.Width * index }, self.options.speed)
})
}
// 動(dòng)態(tài)修改分頁(yè)器按鈕的樣式
Banner.prototype.changeBtn = function(index){
this.pagination.find('li').eq(index).addClass('active').siblings().removeClass('active');
}
// 自動(dòng)輪播
Banner.prototype.autoPlay = function(){
var self = this;
/* 計(jì)時(shí)器中調(diào)用函數(shù)是，函數(shù)中的this 指向 window， 所以需要使用self.timer = setInterval(function(){
self.moveNext();
},2000);
不能直接使用 self.timer = setInterval(self.moveNext(),2000); 形式 */
self.timer = setInterval(function(){
self.moveNext();
},self.options.interval);
}
// 清除自動(dòng)播放
Banner.prototype.clearPlay = function(ele){
var self = this;
ele.mouseenter(function(){
clearInterval(self.timer)
}).mouseleave(function(){
// 再次開啟自動(dòng)輪播
self.timer = setInterval(function(){
self.moveNext();
},self.options.interval);
})
}
// jQuery插件實(shí)現(xiàn)
$.fn.myBanner = function(params){
// params 是自定義的配置項(xiàng)
var banner = new Banner(this,params);
banner.init();
// 如果需要鏈?zhǔn)秸{(diào)用
return this;
}
})(jQuery)
最后在HTML頁(yè)面中進(jìn)行初始化，最好放到HTML結(jié)束標(biāo)簽之前的位置，因?yàn)槲覀兎庋b的插件是依賴于jQuery的，因此首先引入jQuery文件，然后在引入我們自己封裝的js文件；最后就是進(jìn)行初始化設(shè)置：
<script>
$(function(){
$('.mycontainer').myBanner({
// speed:圖片切換速度
// interval：圖片切換的時(shí)間間隔
speed:500,
interval:3000
});
})
</script>
到此為止，我們已經(jīng)實(shí)現(xiàn)了輪播插件的封裝并且實(shí)現(xiàn)了復(fù)用，只需要?jiǎng)討B(tài)的綁定不同的元素mycontainer（可以動(dòng)態(tài)修改成自己的元素名字）即可實(shí)現(xiàn)復(fù)用。
4、如果需要修改容器的大小和圖片的大小,可以直接覆蓋樣式即可：
.mycontainer2{
width: 300px;
height:200px;
}
.mycontainer2 img{
width: 300px;
height:200px;
}
5、完成。恭喜你，你的輪播插件可以正常切換了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js離開或刷新頁(yè)面檢測(cè)(且兼容FF,IE,Chrome)
這篇文章主要介紹了js離開或刷新頁(yè)面檢測(cè)(且兼容FF,IE,Chrome)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
在JavaScript中，var用來(lái)聲明變量，但是這個(gè)語(yǔ)法并不嚴(yán)格要求，很多時(shí)修改，我們可以直接使用一個(gè)變量而不用var聲明它。2009-09-09
JS判斷當(dāng)前頁(yè)面是否在微信瀏覽器打開的方法
這篇文章主要介紹了JS判斷當(dāng)前頁(yè)面是否在微信瀏覽器打開的方法,涉及JavaScript針對(duì)客戶端的相關(guān)判定技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-12-12
Bootstrap框架實(shí)現(xiàn)廣告輪播效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap框架結(jié)合JavaScript實(shí)現(xiàn)廣告輪播特效,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
詳解小程序之簡(jiǎn)單登錄注冊(cè)表單驗(yàn)證
這篇文章主要介紹了小程序之簡(jiǎn)單登錄注冊(cè)表單驗(yàn)證，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
一個(gè)css與js結(jié)合的下拉菜單支持主流瀏覽器
這是一個(gè)css和js結(jié)合的下拉菜單，經(jīng)測(cè)試支持主流瀏覽器，比較適合企業(yè)站，需要的朋友可以參考下2014-10-10
微信小程序視圖容器(swiper)組件創(chuàng)建輪播圖
這篇文章主要為大家詳細(xì)介紹了微信小程序視圖容器（swiper）組件創(chuàng)建輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
在JS中最常看到切最容易迷惑的語(yǔ)法(轉(zhuǎn))
發(fā)現(xiàn)一篇JS中比較容易迷惑的語(yǔ)法的解釋,挺有用的,轉(zhuǎn)載下,與大家分享2010-10-10
Promise是異步編程的一種解決方案，在ES6中Promise被列為了正式規(guī)范，統(tǒng)一了用法，原生提供了Promise對(duì)象。接下來(lái)通過(guò)本文給大家介紹Promise的介紹及基本用法，感興趣的朋友一起看看吧2021-10-10
這篇文章主要介紹了RequireJS用法,結(jié)合簡(jiǎn)單實(shí)例形式分析了RequireJS項(xiàng)目文件結(jié)構(gòu)、相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-08-08