端开发中基本上每个项目都会用到轮播图,今天我们就对常见轮播图的实现原理好好分析一下。
1,普通的渐隐渐现式轮播图
html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="swiper-container">
<div class="swiper-inner" id="swiper-inner">
<img src="img/5.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
</div>
<div class="swiper-dots"></div>
<div class="pre" id="pre"></div>
<div class="next" id="next"></div>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/swiper.js"></script>
<script>
new Swiper({
el: $('#swiper-inner'),
});
</script>
</body>
</html>
css部分:main.css
html,
body {
padding: 0px;
margin: 0px;
}
.swiper-container {
position: relative;
width: 1125px;
height: 352px;
margin: 0 auto;
overflow: hidden;
}
.swiper-inner {
height: 100%;
background-color: #e6e6e6;
text-align: center;
}
.swiper-inner img {
display: none;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.swiper-dots {
position: absolute;
width: 100%;
left: 0;
margin-top: -40px;
text-align: center;
list-style: none;
}
.swiper-dots span {
display: inline-block;
width: 40px;
height: 6px;
background: #607D8B;
margin-left: 5px;
opacity: 0.4;
filter: alpha(opacity=40);
cursor: pointer;
}
.swiper-dots .active {
opacity: 1;
filter: alpha(opacity=100);
}
.pre,
.next {
position: absolute;
top: 50%;
width: 42px;
height: 70px;
margin-top: -24px;
text-align: center;
background: rgba(0, 0, 0, 0.1) url(../img/icon-slides.png) -83px 0px no-repeat;
cursor: pointer;
}
.pre {
left: 30px;
}
.pre:hover {
background: url(../img/icon-slides.png) 0px 0px no-repeat;
}
.next {
right: 30px;
background-position: -122px 0;
}
.next:hover {
background-position: -41px 0;
}
js部分:swiper.js
(function(factory) { if (typeof define === 'function' && define.amd) { define(['jquery'], factory($)); } else if (typeof module !== 'undefined') { module.exports = factory(); } else { window.Swiper = factory(); } })(function() { function Swiper(option) { option = option || {}; this.el = option.el; this.timer = option.timer || 3000; //自动切换时间 if (option.autoplay === 'undefined' || option.autoplay === false) { this.autoplay = false; } else { this.autoplay = true; } this.$img = this.el.find('img'); this.len = this.$img.length; this.c = 0; //当前显示的图片位置 if (this.$img.length > 0) { this.initialize(); } } Swiper.prototype.initialize = function() { this.baseInit(); //初始化dom this.domInit(); //自动播放 if(this.autoplay)this.autoRun(); //初始化事件 this.initEvent(); } //初始化swiper-inner行高和.dot Swiper.prototype.baseInit = function() { //设置swiper-inner行高 $('.swiper-inner').css('line-height', $('.swiper-container').height() + 'px'); //初始化dots var dotSpan = ''; var dotlen = this.len; while (dotlen > 0) { if (dotlen === 1) { dotSpan += '<span class="dot active"></span>'; } else { dotSpan += '<span class="dot"></span>'; } dotlen--; } this.$swiperDots = $('.swiper-dots'); this.$swiperDots.html(dotSpan); this.$dotSpans = this.$swiperDots.find('.dot'); //显示第一张图片 this.$img.eq(0).fadeIn(300); } //显示当前图片 Swiper.prototype.domInit = function() { this.$img.eq(this.c).fadeIn(300).siblings().fadeOut(300); this.$dotSpans.eq(this.c).addClass('active').siblings().removeClass('active'); } //定时器 Swiper.prototype.autoRun = function(c) { if (this.timmer) clearInterval(this.timmer); this.timmer = setInterval(function() { this.c++; this.c = this.c >= this.len ? 0 : this.c; this.domInit(); }.bind(this), this.timer); } //事件 Swiper.prototype.initEvent = function() { //鼠标移入时取消自动播放,离开时继续自动播放 this.el.mouseenter(function() { clearInterval(this.timmer); }.bind(this)); this.el.mouseleave(function() { this.autoRun(); }.bind(this)); //鼠标移入到$dotSpans上,取消自动播放,显示对应的图片 this.$dotSpans.mouseenter(function(e) { clearInterval(this.timmer); this.c = $(e.target).index(); this.domInit(); }.bind(this)); //上一张 $('#pre,#next').mouseenter(function() { clearInterval(this.timmer); }.bind(this)); $('#pre').click(function() { this.c--; this.c = this.c < 0 ? this.len - 1 : this.c; this.domInit(); clearInterval(this.timmer); }.bind(this)); $('#next').click(function() { this.c++; this.c = this.c >= this.len ? 0 : this.c; this.domInit(); clearInterval(this.timmer); }.bind(this)); } return Swiper; });