(翻译)轮播(Carousel )

问题概述

  用户有一组项目要浏览,并可能选择其中的某一项。

示例

这里写图片描述

用途
  • 用于显示很大一组项目,但又想让用户同一时间内只关注其中一小部分项目时;
  • 用于提示用户,除了当前看到的内容,还有更多其它内容[1];
  • 用于没有足够的空间一次性显示所有的项目内容;
  • 用于显示包含精彩内容的项目,例如电影海报、相册封面、产品介绍等;
  • 当项目无法可视化显示时,不要使用本模式,例如指向文本文档或pdf文档的链接等;
  • 如果无法立即看出图片与其关联的内容之间的联系,不要使用本模式。
解决方案

  水平方向排列一组项目,每个项目都附带一个缩略图(或每个项目仅由该图像表示)。项目数量虽多,但每次仅显示3到8个项目。[2]
  要想看项目列表中的其它项目,需要点击导航控件,如指向上、下、左、右的箭头。点击任一箭头,载入后续“视图”,过场动画结束后,所要的项目映入眼底。以此方式向前、向后循环浏览项目列表,因此本模式称之为轮播。

说明

  本模式以循环的方式显示一组图片集合中的子集,优化了屏幕空间。
  本模式中的导航控件表明还有其它内容未显示,鼓励用户继续浏览内容。人因无法纵览全局而不快,本模式以此引导用户浏览项目列表中的所有内容[3]。
  由于是循环轮播,项目列表到尾后又从头开始,这促使用户持续浏览项目列表中的内容[4]。

原文地址:http://ui-patterns.com/patterns/Carousel
[1]原文:Use when you want to tease the user by letting him or her know that there are more items available than what is currently shown.
[2]原文:Arrange a set of items on a horizontal line where each item preferably has an thumbnail image attached (or the item is only represented by the image). Even though the list of items is long, only 3-8 images are shown at the same time.
[3]原文:The carousel pattern can in this way be used as an extra incentive for the user to browse through all items of the list, as we as humans do not feel comfortable by not being aware of the “full picture”.
[4]原文:As the carousel is circular, the start of the list will be shown after the user has reached the end. This behavior encourages the user to continue browsing through the list.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
PC:个人计算机Personal Computer   ·CPU:中央处理器Central Processing Unit   ·CPU Fan:中央处理器的“散热器”(Fan)   ·MB:主机板MotherBoard   ·RAM:内存Random Access Memory,以PC-代号划分规格,如PC-133,PC-1066,PC-2700   ·HDD:硬盘Hard Disk Drive   ·FDD:软盘Floopy Disk Drive   ·CD-ROM:光驱Compact Disk Read Only Memory   ·DVD-ROM:DVD光驱Digital Versatile Disk Read Only Memory   ·CD-RW:刻录机Compact Disk ReWriter   ·VGA:显示卡(显示卡正式用语应为Display Card)   ·AUD:声卡(声卡正式用语应为Sound Card)   ·LAN:网卡(网卡正式用语应为Network Card)   ·MODM:数据卡或调制解调器Modem   ·HUB:集线器   ·WebCam:网络摄影机   ·Capture:影音采集卡   ·Case:机箱   ·Power:电源   ·Moniter:屏幕,CRT为显像管屏幕,LCD为液晶屏幕   ·USB:通用串行总线Universal Serial Bus,用来连接外围装置   ·IEEE1394:新的高速序列总线规格Institute of Electrical And Electronic Engineers   ·Mouse:鼠标,常见接口规格为PS/2与USB   ·KB:键盘,常见接口规格为PS/2与USB   ·Speaker:喇叭   ·Printer:打印机   ·Scanner:扫描仪   ·UPS:不断电系统   ·IDE:指IDE接口规格Integrated Device Electronics,IDE接口装置泛指采用IDE接口的各种设备   ·SCSI:指SCSI接口规格Small Computer System Interface,SCSI接口装置泛指采用SCSI接口的各种设备   ·GHz:(中央处理器运算速度达)Gega赫兹/每秒   ·FSB:指“前端总线(Front Side Bus)”频率,以MHz为单位   ·ATA:指硬盘传输速率ATAttachment,ATA-133表示传输速率为133MB/sec   ·AGP:显示总线Accelerated Graphics Port,以2X,4X,8X表示传输频宽模式   ·PCI:外围装置连接端口Peripheral Component Interconnect   ·ATX:指目前电源供应器的规格,也指主机板标准大小尺寸   ·BIOS:硬件(输入/输出)基本设置程序Basic Input Output System   ·CMOS:储存BIOS基本设置数据的记忆芯片Complementary Metal-Oxide Semiconductor   ·POST:开机检测Power On Self Test   ·OS:操作系统Operating System   ·Windows:窗口操作系统,图形接口   ·DOS:早期文字指令接口的操作系统   ·fdisk:“规划硬盘扇区”-DOS指令之一   ·format:“硬盘扇区格式化”-DOS指令之一   ·setup.exe:“执行安装程序”-DOS指令之一   ·Socket:插槽,如CPU插槽种类有SocketA,Socket478等等   ·Pin:针脚,如ATA133硬盘排线是80Pin,如PC2700内存模块是168Pin   ·Jumper:跳线(短路端子)   ·bit:位(0与1这两种电路状态), 计算机数据最基本的单位   ·Byte:字节,等于8 bit(八个位的组合,共有256种电路状态),计算机一个文字以8 bit来表示   ·KB:等于1024 Byte   ·MB:等于1024 KB   ·GB:等于1024 MB
好的,关于无缝轮播,可以通过原生JS手写实现。下面是一个简单的无缝无限轮播carousel实现,你可以参考一下: HTML部分: ```html <div class="carousel"> <ul class="carousel-list"> <li><img src="img1.jpg"></li> <li><img src="img2.jpg"></li> <li><img src="img3.jpg"></li> <li><img src="img4.jpg"></li> </ul> </div> ``` CSS部分: ```css .carousel { position: relative; overflow: hidden; width: 600px; height: 400px; } .carousel-list { position: absolute; left: 0; top: 0; width: 10000px; height: 400px; margin: 0; padding: 0; list-style: none; } .carousel-list li { float: left; width: 600px; height: 400px; margin: 0; padding: 0; } ``` JS部分: ```javascript var carousel = document.querySelector('.carousel'); var carouselList = document.querySelector('.carousel-list'); var carouselItems = document.querySelectorAll('.carousel-list li'); var carouselWidth = carousel.offsetWidth; var currentIndex = 0; // 克隆第一张图片,并放到最后 var firstItem = carouselItems[0].cloneNode(true); carouselList.appendChild(firstItem); // 点击左右按钮的事件处理函数 function handleButtonClick(event) { var target = event.target; if (target.classList.contains('prev')) { currentIndex--; if (currentIndex < 0) { currentIndex = carouselItems.length - 1; carouselList.style.left = -currentIndex * carouselWidth + 'px'; } } else if (target.classList.contains('next')) { currentIndex++; if (currentIndex >= carouselItems.length) { currentIndex = 0; carouselList.style.left = 0; } } var left = -currentIndex * carouselWidth; carouselList.style.left = left + 'px'; } // 绑定左右按钮的事件 var prevBtn = document.createElement('button'); prevBtn.classList.add('prev'); prevBtn.innerText = '上一张'; prevBtn.addEventListener('click', handleButtonClick); var nextBtn = document.createElement('button'); nextBtn.classList.add('next'); nextBtn.innerText = '下一张'; nextBtn.addEventListener('click', handleButtonClick); carousel.appendChild(prevBtn); carousel.appendChild(nextBtn); ``` 这段代码实现了无限轮播,并且可以通过左右按钮控制图片的切换。你可以将这段代码复制到本地运行,看看效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值