php前端轮播图代码,原生js组件化开发简单轮播图实例代码

Document

.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;

}

(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';//根据item大小定义轮播图容器宽度

this.banner.style.minHeight = this.bannerItem[0].offsetHeight + 'px';//根据item大小定义轮播图容器高度

this.bannerWraper.style.width = this.bannerW * this.bannerItem.length + 'px';

this.bannerItem[0].className = 'banner-item active';

this.navigationItem = null;

// 定义当前页码索引

this.index = 0;

this.speed = null;

//定时器

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');

// 初始化功能函数

this.initNavigation();

this.changeActive();

// 鼠标移入清除自动播放

this.clearTimer();

if (this.options.loop) this.loop();

if (this.options.autoPlay) this.autoPlay();

}

//初始化分页按钮

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 += '

} else {

navigationItem += '

}

}

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';// 当前_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);

}

}

//自动播放

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

}

// 鼠标移入/移出 => 清除/重启定时器

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对象

})(window, document);

Swiper({

el: '#swiper',

autoPlay: true, // 默认为false不自动播放

delay: 3000, // 默认为4s

loop: true

});

本篇介绍了原生js组件化开发简单轮播图实例代码，更多相关内容请关注php中文网。

相关推荐：