端开发中基本上每个项目都会用到轮播图，今天我们就对常见轮播图的实现原理好好分析一下。
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;
});
相关推荐
在网页设计中，图片轮播图是一种常见的交互元素，它能有效地展示多张图片而不会占用过多的空间。本文将深入探讨“jquery图片轮播图多图切换效果（带小图左右箭头）”这一主题，包括其核心技术和实现方式。 首先，...
3. **常见轮播图效果**： - **无缝轮播**：最后一张与第一张之间的切换看起来像无间隙的循环。 - **淡入淡出**：图片之间通过透明度变化进行切换，营造柔和的过渡效果。 - **3D效果**：通过CSS3的3D变换，实现更...
下面将详细讲解这个主题，包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 图片切换是通过CSS控制图片的显示和隐藏，实现图片的动态变化。这通常涉及到CSS的`display`属性，通过改变...
在网页设计和开发中，图片切换与轮播图是一种常见的元素，用于展示多张图片或内容，特别是当页面空间有限但需要展示的信息量较大时。它们通常被用于产品展示、新闻更新、广告轮播等场景。轮播图设计的核心目标是提供...
在iOS开发中，轮播图（Carousel）是一种常见的UI组件，用于展示一组可滑动的图片或视频，常用于广告、推荐内容或者展示多种产品。本资源“IOS轮播图合集（视频+图片）”显然是一个包含了实现这种功能代码示例的...
在前端开发中，轮播图（Carousel）是一种常见的网页元素，用于展示一组可滑动切换的图片或内容。本资源包含纯JavaScript实现的三种不同类型的轮播图，这对于熟悉JavaScript和想要提升前端技能的开发者来说，是一份...
轮播图是网页设计中常见的元素，用于展示一组图片或内容的动态切换效果，常用于产品展示、新闻更新等场景。本压缩包“轮播图实现过程.rar”提供了实现轮播图的完整流程，包括图片和操作代码，适用于在浏览器环境或...
轮播图，也被称为滑动图片展示或旋转木马，是一种常见的网页设计元素，用于在有限的空间内展示多个图像或内容。在网页设计中，轮播图通常用于展示产品、服务、新闻或特色内容，以吸引用户的注意力并提高用户体验。在...
在Android开发中，轮播图（Carousel）是一种常见的UI组件，用于展示一组可滑动的图片或内容。这种效果在很多应用中都能看到，比如新闻客户端的头条展示、电商应用的商品推荐等。在这个"轮播图轮播图轮播图demo"项目...
在实现轮播图时，Bootstrap提供了一个内置的Carousel组件，该组件具有图片切换、自动播放、导航箭头等功能，能轻松创建出专业的轮播效果。 首先，要在网页中使用Bootstrap的轮播图，你需要在HTML文件中引入...
在网页设计中，轮播图（Carousel）是一种常见的展示多张图片或内容的交互元素，通常用于首页或者产品展示区，以吸引用户的注意力并提供丰富的信息。"自适应大小轮播图"是针对不同设备屏幕尺寸，能自动调整大小以适应...
一般情况下，你可以使用`<div>`元素作为轮播图容器，并在其中创建其他子元素来显示轮播图片和控制按钮。 2. CSS样式：通过CSS来美化轮播图的外观和布局。你可以设置容器元素的宽度、高度和布局方式，以及图片的位置...
在"图片轮播图下方配文字可变"这一特性中，JavaScript需要与CSS配合，确保当图片切换时，对应的描述文字也随之更新。这通常通过预先定义好每张图片对应的文字内容，然后在图片切换时，根据当前图片的索引来选择显示...
在网页设计和开发中，轮播图是一种常见的展示方式，用于在有限的空间内展示多张图片或内容。本文将深入探讨“五大类十多种轮播图实现”这一主题，涵盖HTML、web、js和jQuery相关的知识点，以帮助你找到适合项目需求...
在Android应用开发中，Banner广告轮播图是一种常见的展示方式，用于吸引用户的注意力并推广不同的内容，如产品、服务或活动。自定义Banner广告轮播图可以满足开发者对设计和功能的个性化需求，同时，自定义Indicator...
在网页设计中，轮播图是一种常见的展示方式，它能够以动态的形式呈现多张图片或内容，节省空间的同时增加交互性。"web前端自动滚动且点击切换轮播图代码"是一个针对网页前端开发的实现方案，它包含了自动滚动和用户...
HTML轮播图是一种常见的网页元素，用于展示一组图像或内容，通过自动切换或者用户交互来实现动态展示。这种效果能够有效地节省网页空间，同时增加视觉吸引力。本资源提供了实现最简单HTML轮播图的源码，非常适合初学...
在IT领域，轮播图片（Carousel）是一种常见的用户界面元素，用于展示一组可滑动的图像或内容。这种设计常用于网站的首页、产品展示、新闻更新等场景，以吸引用户的注意力并提供丰富的视觉体验。下面我们将深入探讨...
移动用户交互设计
在网页设计中，轮播图是一种常见的展示多张图片或内容的交互元素，它通过循环播放的方式呈现，常用于产品展示、广告宣传等场景。在本项目中，我们利用CSS3的`translate`属性和JavaScript的`setInterval`函数来实现一...