Skip to content

[js] 第36天 请手写一个幻灯片的效果 #134

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第36天 请手写一个幻灯片的效果
注:可以使用纯css

Activity

AnsonZnl

AnsonZnl commented on May 22, 2019

@AnsonZnl
Contributor

使用css3 动画就可以,预览地址:https://codepen.io/ansonznl/pen/KLyJjX

haizhilin2013

haizhilin2013 commented on May 22, 2019

@haizhilin2013
CollaboratorAuthor

@AnsonZnl 不错,可以再用js再写个,呵呵

tzjoke

tzjoke commented on May 28, 2019

@tzjoke

js的思路可以是设置元素className来切换

myprelude

myprelude commented on Jun 13, 2019

@myprelude

你这个是难为我胖虎啊 @haizhilin2013
面试那么长时间写个这个也是有点麻烦 考虑的比较多,简单说下思路还是ok的,
思路一 元素并排浮动 改变offset
思路二 position 层叠 改变z-Index

Konata9

Konata9 commented on Sep 1, 2019

@Konata9

不算很好的实现,先占个楼。

https://codepen.io/Konata9/pen/GRKvxjx?editors=0111

seho-dev

seho-dev commented on Sep 3, 2019

@seho-dev

.box > .main > .swiper > .swiperList {
position: absolute;
display: flex;
width: 3500px;
height: 270px;
animation: 20s swiper infinite; /循环/
}
.swiper > .swiperList > li {
width: 625px;
height: 270px;
}
.box > .main > .swiper > .swiperList > li:first-child {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(2) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(3) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(4) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(5) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}

/动画/
@Keyframes swiper {
0% {
left: 0px;
}

12% {
left: 0px;
}

25% {
left: -625px;
}

37% {
left: -625px;
}

50% {
left: -1250px;
}

62% {
left: -1250px;
}

75% {
left: -1875px;
}

87% {
left: -1875px;
}

100% {
left: -2500px;
}
}

jamsehua

jamsehua commented on Jan 10, 2021

@jamsehua

.box > .main > .swiper > .swiperList {
position: absolute;
display: flex;
width: 3500px;
height: 270px;
animation: 20s swiper infinite; /循环/
}
.swiper > .swiperList > li {
width: 625px;
height: 270px;
}
.box > .main > .swiper > .swiperList > li:first-child {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(2) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(3) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(4) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(5) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}

/动画/
@Keyframes swiper {
0% {
left: 0px;
}

12% {
left: 0px;
}

25% {
left: -625px;
}

37% {
left: -625px;
}

50% {
left: -1250px;
}

62% {
left: -1250px;
}

75% {
left: -1875px;
}

87% {
left: -1875px;
}

100% {
left: -2500px;
}
}

c3整的挺6

HoseaGuo

HoseaGuo commented on Aug 22, 2022

@HoseaGuo
  1. 利用 animation-timing-function 的 steps
    https://codepen.io/hoseaguo/pen/NWYJbQr

  2. 纯css无限轮播,鼠标悬停动画停止
    https://codepen.io/hoseaguo/pen/OJvqGGw

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    jsJavaScript

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@Konata9@myprelude@tzjoke@HoseaGuo

        Issue actions

          [js] 第36天 请手写一个幻灯片的效果 · Issue #134 · haizlin/fe-interview