端开发中基本上每个项目都会用到轮播图,今天我们就对常见轮播图的实现原理好好分析一下。
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; });
相关推荐
移动用户交互设计
很多页面里,项目里,轮播图几乎是无处不在,今天我们就来说说轮播图的写法 在轮播图数组list中,定义一个变量listIndex = 0表示第一张图片,默认渲染第一张图片即list[listIndex],然后获取每张图片的下标。点击...
一般情况下,你可以使用`<div>`元素作为轮播图容器,并在其中创建其他子元素来显示轮播图片和控制按钮。 2. CSS样式:通过CSS来美化轮播图的外观和布局。你可以设置容器元素的宽度、高度和布局方式,以及图片的位置...
文件简述:文件使用原生javaScript制作了轮播图,通过更改图片元素的display属性进行图片的显示与隐藏。 轮播图:轮播图常见于电商类、资讯类应用、功能首页、功能模块主页面,还有网易云音乐App的发现模块主页。...
主要使用和淘宝、小米和京东类似的CSS3 translateX移动达到轮播图丝滑般翻页~
众所周知,轮播图是被广泛的运用的。 轮播图我们在很多的网站上都可以看到,例如淘宝、京东这些网站都很常见。 下面开始我们的轮播之旅: 搭建我们的骨架
微信小程序轮播图swiper,实现了基本的轮播图,ui设计的常见的轮播图,3d轮播图。代码明确,直接复制粘贴即可使用
实现HTML轮播图的方法有多种,以下是其中一种常见的实现方式: 1.HTML结构:使用元素作为轮播图的容器,内部包含多个标签或其他内容标签,每个标签代表一个轮播项。 2.CSS样式:通过CSS样式设置轮播图容器的宽度、...
本例实现的是网页轮播图效果,采用原生JavaScript编写。可定时自动切换图片,拿到网站上可直接使用。轮播图的应用很常见的,前端学习必会的……
jquery图片轮播插件 左右、上下轮播jquery插件
本篇详细介绍了页面中常见的轮播图效果在实际项目中的应用,利用css+html+js+dom来实现动态播放的效果
js带时间轴的图片轮播切换代码,在各类网站banner图,实现的轮播切换,这个带时间轴的切换,不同于常见的轮播图切换
微信小程序常用轮播图,常见四种轮播图,效果和PC的一样,常见的四种,可以自己修改……………………………………………………………………………………………………………………
有两个示例,一个是网上常见的幻灯片似的新闻图片切换,一个是ipd横向左右滑动切换,完整的示例
该资源是HTML的三个实例,轮播图片、放大镜效果、面板拖动,里面附有完整的代码和图片资源,需要学习参考的可以下载。
利用javascript能实现常见的动态的网页轮播图效果,如下图1所示: 图1 实现该轮播图有以下几个要点: (1)在左右两侧各有一个箭头,分别指的是向左和向右切换,即点击相应的位置就会切换到该图片之前(或之后)的一张...
使用纯css 来实现轮播图的功能,拥有常见的功能,并且效率比js实现的要高很多
常见的轮播图有三种,有缝轮播、无缝轮播和淡入淡出,该资源展示了三种轮播图的一个小案例。 1.有缝轮播(Slideshow):有缝轮播是最基本的轮播效果。在有缝轮播中,多张图片按照一定的时间间隔依次切换显示。通常,...
本资源是利用JS简单的仿照网站上常见的广告轮播实现图片的自动切换,来回切换,下标切换等。
轮播图:“轮播图是指在一个模块或者窗口,通过鼠标点击或手指滑动后,可以看到多张图片。这些图片统称为轮播图,...轮播图常见于电商类、资讯类应用、功能首页、功能模块主页面,还有网易云音乐App的发现模块主页。”