Rumah > Artikel > hujung hadapan web > 原生js组件化开发简单轮播图实例代码
原生js组件化开发简单轮播图实例代码
- jackloveasal
- 2018-06-11 22:58:582740semak imbas
<!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';//根据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 += '<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';// 当前_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
});
</script>
</body>
</html>
本篇介绍了原生js组件化开发简单轮播图实例代码，更多相关内容请关注php中文网。
相关推荐：<a href="http://www.php.cn/website-design-ask-402906.html" target="_blank">前端调用微信支付接口</a><a href="http://www.php.cn/website-design-ask-402908.html" target="_blank"><br/><br/><br/></a><br/>
Atas ialah kandungan terperinci 原生js组件化开发简单轮播图实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css3动画导航栏3DArtikel seterusnya：$选择器--是如何将DOM封装成jquery对象