图片轮播组件实现

为什么要自己实现

图片轮播，这其实已经是一个烂大街的功能，到处可见；网上也有很多现成的组件，那为什么还要自己来实现呢？主要的原因有两个

  • 性能
  • 定制化

一个是网上的组件良莠不齐，在pc跑跑还可以，到了移动端，各种卡。
另外一个原因，是因为有诸多定制化的交互要实现，所以还是自力更生，丰衣足食！

举两个栗子

在自己撸代码之前，先来看看别人家的组件，正所谓：不看白不看。下面列举两种网上比较通用的轮播方案

  • 方案一
  • 方案二

方案一在轮播至边界时，需要从这一端快速滑动至另外一端，体验不佳；
方案二对边界轮播做了优化，但还是略显不足；

原创方案

接下来看看相关的示意图！

  • 容器用了虚线框，因为此方案的ul是不需要设置宽高的
  • 容器ul和元素li都使用了translate3d以及相关属性,从而更好的利用硬件加速
  • 边界处理：只移动一个元素，便可实现循环，性价比更高

原创demo

只处理了移动端事件（touch系列），所以要体验完整功能，请使用移动端浏览器打开以下实例。

base模式
scale模式
parallel模式

github项目

更多细节和源码，请：点击访问

原文地址：https://www.cnblogs.com/baimeishaoxia/p/12203546.html

时间： 2024-08-03 15:41:32

图片轮播组件实现的相关文章

【AmazeUI】图片轮播组件

这个组件在IE上一直很火,其实现可以参考<[JavaScript]原生态兼容IE6的图片轮播>(点击打开链接),AmazeUI同样在移动端提供这样的组件. 其效果如下,这个结果要在谷歌.野狐禅等浏览器的手机端调试模式才能看到,在PC端会布局错乱. 用户可以自由滑动,点击下方的圆点,选择自己要浏览的图片,当鼠标悬停在图片上,其组件则不会继续轮播图片. 实现代码如下: <!--使用HTML5开发--> <!doctype html> <html class="

Vue学习—Vue写一个图片轮播组件

1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内容. 2.每学一个新东西 ,图片轮播都是很好的练手案例,而且,也很实用. 3.基本要求:页面加载,自动播放.鼠标悬停,停止播放.鼠标离开,继续播放 点击左右箭头切换上一张,下一张图片. 下方小圆点显示当前位第几张图片. 4.使用Vue实现,想法: 5.示例代码 结构html: <template>

MUI组件二：复选框、对话框、图片轮播、图标和输入框

1.checkbox(复选框) checkbox常用于多选的情况,比如批量删除.添加群聊等: DOM结构 <div class="mui-input-row mui-checkbox"> <label>checkbox示例</label> <input name="checkbox1" value="Item 1" type="checkbox" checked> </di

【JavaScript】使用Bootstrap来编写 图片轮播Carousel

图片轮播组件是一个在网页中很常见的技术,但是如果直接编写的话,需要很长的JavaScript编码,同时也不好控制大小. 如果使用Bootstrap来编写图片轮播组件Carousel,则能够节约很多时间. 同时说一下,Carousel这个词的本义是回旋木马. 一.基本目标 在网页编写多张图片的轮播组件Carousel,鼠标放在上面自带悬停效果,并且在每张图片下面配有图片说明. 由于笔者的电脑视频录制软件比较渣,也觉得没必要画太多时间在这上面,觉得只要能说明问题就行,所以下面的GIF失色比较严重,但

【JavaScript】原生态兼容IE6的图片轮播

<[Bootstrap]图片轮播组件Carousel>(点击打开链接)虽然做得很不错,但是由于只兼容到IE8,所以没有用的.其实原生态兼容IE6的图片轮播并没有想象中的那么难,网上的很多兼容IE6的图片轮播其实代码写得很糟糕的.首先复用性很差,根本就不知道怎么修改,然后加入了很多如同百叶窗这些可有可无的特效,把原本简短的代码弄得很差,最后,这些东西还直接用JavaScript创建组件来显示自己的Javascript学得有多么地强大,然后又不好好教别人怎么做,直接用一个JS写完整个网页个人觉得相

图片轮播插件的设计抽象

提出需求首页的轮播焦点图是个常见的需求.需求是这样子的1 每隔2秒切换一次图片2 切换图片的时候,会对应显示该图片的说明3 切换图片的时候,对应显示图片处于小按钮中的第几个,点击小按钮时跳到对应的大图4 自动滚动图片,鼠标放到图片区域时,停止滚动,移出时继续5 点击左右可以上下切换图片对于做一个图片轮播并不难,按照要求,写代码就行.而如何设计一个通用的图片轮播组件确实需要好好思考.因为样式是不确定的,同时html结构也是不确定的.所以问改如何设计这个轮播js呢? 使用插件?我是反插件的,除非插件

H5如何做手机app(移动Web App)?图片轮播？

移动Web App 跨平台开发 用户不需要去卖场来下载安装App 任何时候都可以发布App只需要一个开发项目 可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Ruby on Rails,Python) 1 MUI-轻量APP框架 快速体验 Quickly get up and running with a mui app. 1. 下载Hello mui App 点击下载 已打包好的Hello mui 手机app,直接在手机上体验mui的控件UI及能力展示: 2

bootstrap轮播组件,大屏幕图片居中效果

在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中效果不同,大屏效果非常糟糕.比如 这样一张图片, 为了图片自适应设置width=100%,在宽1920px下显示效果是这样的 显然,因为图片设置了100%的宽度,其大部分内容被截去,显示非常糟糕. 后来想了想.有没有办法可以让图片真正的自适应呢并且居中呢,于是想到了css3背景图片属性backgro

面向对象编程---图片轮播

今天复习了一下面向对象编程,下面是我的效果图 看着这个图片你会觉得这没有什么,那么上代码: html部分: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 ul,ol,li{padding:0;margin:0;li