原生js組件化開發(fā)簡(jiǎn)單輪播圖的示例分析-創(chuàng)新互聯(lián)
小編給大家分享一下原生js組件化開發(fā)簡(jiǎn)單輪播圖的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.banner {
overflow: hidden;
position: relative;
}
ul,
ol,
li {
padding: 0;
margin: 0;
left: 0;
top: 0;
list-style: none;
}
.trans{
transition: all .3s ease;
}
.banner-wraper {
position: absolute;
left: 0;
top: 0;
}
.banner-wraper .banner-item {
float: left;
width: 900px;
height: 400px;
background: yellow;
}
.banner-wraper .banner-item:nth-child(3) {
background: blue;
}
.banner-wraper .banner-item:nth-child(2n) {
background: green;
}
.navigation {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 90%;
}
.nav-item {
width: 10px;
height: 10px;
background: #000;
display: inline-block;
margin: 0 5px;
}
.nav-item:hover {
cursor: pointer;
opacity: 0.4;
}
.navigation .active {
opacity: 0.4;
}
</style>
</head>
<body>
<p class="banner" id="swiper">
<ul class="banner-wraper trans">
<li class="banner-item"></li>
<li class="banner-item"></li>
<li class="banner-item"></li>
<li class="banner-item"></li>
<li class="banner-item"></li>
<li class="banner-item"></li>
</ul>
<ol class="navigation">
</ol>
</p>
<!-- <script src="./jquery.js"></script> -->
<script>
(function (win, doc) {
function Swiper(options) {
return new Swiper.prototype.init(options);
}
Swiper.prototype.init = function (options) {
// 初始化方法配置
this.options = options;
this.options.delay = options.delay || 4000;
this.options.autoPlay = options.autoPlay || false;
this.banner = doc.querySelector(this.options.el);
this.bannerWraper = this.banner.querySelector('.banner-wraper');
this.bannerItem = this.banner.querySelectorAll('.banner-item');
this.bannerW = this.bannerItem[0].offsetWidth;//輪播圖寬度;
this.banner.style.width = this.bannerW + 'px';//根據(jù)item大小定義輪播圖容器寬度
this.banner.style.minHeight = this.bannerItem[0].offsetHeight + 'px';//根據(jù)item大小定義輪播圖容器高度
this.bannerWraper.style.width = this.bannerW * this.bannerItem.length + 'px';
this.bannerItem[0].className = 'banner-item active';
this.navigationItem = null;
// 定義當(dāng)前頁(yè)碼索引
this.index = 0;
this.speed = null;
//定時(shí)器
this.timer = null;
this.init(this.options);
}
Swiper.fn = Swiper.prototype.init.prototype;
Swiper.fn.init = function () {
var speed = getComputedStyle(this.bannerWraper, false).transition;
speed = speed.split(' ')[1];
this.speed = (+speed.substring(0,speed.length-1)) * 1000;
// console.log(this.speed,'speed');
// 初始化功能函數(shù)
this.initNavigation();
this.changeActive();
// 鼠標(biāo)移入清除自動(dòng)播放
this.clearTimer();
if (this.options.loop) this.loop();
if (this.options.autoPlay) this.autoPlay();
}
//初始化分頁(yè)按鈕
Swiper.fn.initNavigation = function () {
var navigation = doc.querySelector('.navigation');
var navigationItem = '';
for (var i = 0, len = this.bannerItem.length; i < len; ++i) {
if (i === 0) {
navigationItem += '<p class="nav-item active"></p>';
} else {
navigationItem += '<p class="nav-item"></p>';
}
}
navigation.innerHTML = navigationItem;
this.navigationItem = doc.querySelectorAll('.nav-item');
}
Swiper.fn.changeActive = function () {
var _this = this;
for (var i = 0, len = _this.navigationItem.length; i < len; ++i) {
(function (i) {// 閉包保存i值
_this.navigationItem[i].onclick = function () {
_this.index = i;
_this.changeMain(this);
}
})(i);
}
}
Swiper.fn.changeMain = function (This) {
// console.log(this.index);
var _this = this;
if(this.options.loop && this.index == 0) {
this.index = this.navigationItem.length;
};
for (var j = 0, len = this.navigationItem.length; j < len; ++j) {
this.navigationItem[j].className = 'nav-item'
}
This.className = 'nav-item active';// 當(dāng)前_this指向 li
this.bannerWraper.style.left = - this.bannerW * this.index + 'px';
// console.log(this.index,'this.index');
if(this.options.loop && this.index == this.navigationItem.length){
setTimeout(function(){
_this.bannerWraper.className = 'banner-wraper';
_this.bannerWraper.style.left = 0;
setTimeout(function(){
_this.bannerWraper.className = 'banner-wraper trans';
}, _this.speed/2);
}, _this.speed);
}
}
//自動(dòng)播放
Swiper.fn.autoPlay = function () {
var _this = this;
var len = _this.navigationItem.length;
this.options.loop === true ? len : len = len - 1;
this.timer = setInterval(function () {
if (_this.index >= len) {
_this.index = 0;
} else {
_this.index++;
}
_this.changeMain(_this);
if(_this.options.loop && _this.index === len){
_this.index = 0;
_this.navigationItem[_this.index].className = 'nav-item active';
setTimeout(function(){
_this.bannerWraper.className = 'banner-wraper';
console.log(1)
_this.bannerWraper.style.left = 0;
setTimeout(function(){
console.log(2)
_this.bannerWraper.className = 'banner-wraper trans';
}, _this.speed/2);
}, _this.speed);
return;
}
_this.navigationItem[_this.index].className = 'nav-item active';
}, this.options.delay);
}
// 鼠標(biāo)移入/移出 => 清除/重啟定時(shí)器
Swiper.fn.clearTimer = function () {
var _this = this;
this.banner.onmouseover = function () {
clearInterval(_this.timer);
_this.timer = null;
}
this.banner.onmouseout = function () {
if (_this.options.autoPlay) _this.autoPlay();
}
}
Swiper.fn.loop = function() {
var htmlObjConvertStr = function(htmlObj){
var pContainer = document.createElement('p');
pContainer.appendChild(htmlObj);
return pContainer.innerHTML;
};
var _bannerHtml = this.bannerWraper.innerHTML;
this.bannerWraper.innerHTML = _bannerHtml + htmlObjConvertStr(this.bannerItem[0]);
this.bannerItem = this.banner.querySelectorAll('.banner-item');
this.bannerWraper.style.width = this.bannerW * this.bannerItem.length + 'px';// 修正banenrWraper寬度
this.bannerItem[this.bannerItem.length - 1].className = 'banner-item';// 修正末尾banner-item類名
}
Swiper.fn.constructor = Swiper;// 修正contructor指向
win.Swiper = Swiper;// 將swiper掛載到window對(duì)象
})(window, document);
Swiper({
el: '#swiper',
autoPlay: true, // 默認(rèn)為false不自動(dòng)播放
delay: 3000, // 默認(rèn)為4s
loop: true
});
</script>
</body>
</html>看完了這篇文章，相信你對(duì)“原生js組件化開發(fā)簡(jiǎn)單輪播圖的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
當(dāng)前名稱：原生js組件化開發(fā)簡(jiǎn)單輪播圖的示例分析-創(chuàng)新互聯(lián)
標(biāo)題來源：http://www.jbt999.com/article36/doohsg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司、用戶體驗(yàn)、App開發(fā)、網(wǎng)站排名
聲明：本網(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；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- MacOS通過FTP工具上傳文件的方法-創(chuàng)新互聯(lián)
- C51實(shí)現(xiàn)流水燈-創(chuàng)新互聯(lián)
- session與cookie的不同點(diǎn)是什么-創(chuàng)新互聯(lián)
- 解決vue按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)問題-創(chuàng)新互聯(lián)
- python常用的內(nèi)置模塊和常用的第三方模塊-創(chuàng)新互聯(lián)
- H3CIRF2典型應(yīng)用-創(chuàng)新互聯(lián)
- phpcmsv9后臺(tái)登錄提示驗(yàn)證碼錯(cuò)誤怎么辦-創(chuàng)新互聯(lián)
- 網(wǎng)站建設(shè)全網(wǎng)營(yíng)銷的轉(zhuǎn)型速度 2016-10-28
- 全網(wǎng)營(yíng)銷型網(wǎng)站與傳統(tǒng)企業(yè)網(wǎng)站有何區(qū)別 2016-10-13
- 不懂全網(wǎng)營(yíng)銷推廣怎么辦？這里有答案 2022-07-08
- 常見的全網(wǎng)營(yíng)銷方式都有什么？ 2015-08-30
- 你知道全網(wǎng)營(yíng)銷推廣具體指的哪些方面嗎 2021-09-05
- 全網(wǎng)營(yíng)銷推廣對(duì)企業(yè)非常重要 2013-06-16
- 網(wǎng)絡(luò)營(yíng)銷中全網(wǎng)營(yíng)銷對(duì)企業(yè)有什么幫助？ 2014-08-02
- 為什么要做全網(wǎng)營(yíng)銷?全網(wǎng)營(yíng)銷有哪些好處? 2015-05-14
- 全網(wǎng)營(yíng)銷怎么做才有效果呢? 2014-07-08
- 給你的產(chǎn)品做一個(gè)全網(wǎng)營(yíng)銷推廣方案 2022-05-26
- 如何做好全網(wǎng)營(yíng)銷推廣 2016-11-09
- 全網(wǎng)營(yíng)銷之seo軟文營(yíng)銷作用及技巧！ 2016-11-07