轮播图（4）

最新推荐文章于 2021-08-29 10:46:47 发布

VIP文章贰拾壹先生

最新推荐文章于 2021-08-29 10:46:47 发布

阅读量209

点赞数

分类专栏： Web前端文章标签：轮播图 js 手风琴旋转木马 css

本文链接：https://blog.csdn.net/zheng18237111686/article/details/114693539

版权

轮播（4）

轮播-手风琴（四）

1，需求，

在之前的三个轮播图之上，继续完善轮播类型之轮播图-手风琴

2，原理

动态缓慢的改变图片的宽度，缓慢移动的代码被抽离出来，放在util.js文件中，方便其他轮播使用，轮播中所用到的图片依然用颜色代替，

3，代码（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴</title>
    <style>
        ul{
    list-style: none;}
        * {
    margin: 0px; padding: 0px;}
        div {
    
            width: 1150px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }
        div ul {
    
            width: 1300px;
        }
        div li {
    
            width: 240px;
            height: 400px;
            float: left;
        }
        div li:nth-child(1) {
    
            background-color: red;
        }
        div li:nth-child

最低0.47元/天解锁文章

贰拾壹先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图（4）

轮播（4）轮播-手风琴（四）1，需求，在之前的三个轮播图之上，继续完善轮播类型之轮播图-手风琴2，原理动态缓慢的改变图片的宽度，缓慢移动的代码被抽离出来，放在util.js文件中，方便其他轮播使用，轮播中所用到的图片依然用颜色代替，3，代码（index.html）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
复制链接

扫一扫