Js - 京东轮播图的实现(JQuery)

最新推荐文章于 2023-03-30 22:06:06 发布

Aleo阿乐

最新推荐文章于 2023-03-30 22:06:06 发布

阅读量424

点赞数

分类专栏： JavaScript 文章标签： js jquery html css

本文链接：https://blog.csdn.net/qq_41912032/article/details/109585016

版权

文章目录

主要功能:

图片可进行左右切换
自动轮播效果实现
展示图片下方图片列表切换
小圆点可随着图片变换同步展示

运行图:

tu1

源代码参考:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font_uq7xe091nz/iconfont.css">
    <style>
        * {
   
            margin: 0px;
            padding: 0px;
        }

        a {
   
            text-decoration: none;
        }

        .container {
   
            width: 1500px;
            height: 900px;
            margin-left: 140px;
            margin-top: 30px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        #did {
   
            display: flex;
            height: 500px;
            margin-left: 73px;
            position: relative;
        }

        #list {
   
            display: flex;
            width: 1000px;
            height: 120px;
            margin-top: -80px;
            padding-left: 100px;
        }

        #mid {
   
            width: 887px;
            height: 560px;
        }

        #list img {
   
            width: 120px;
            border: 1px solid #fff;
            margin-left: 3px;
        }



        #list img:hover {
   
            border: 2px solid red;
        }


        #buttons {
   
            /*小圆点绝对定位*/
            position: absolute;
            height: 10px;
            width: 220px;

最低0.47元/天解锁文章

Aleo阿乐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js - 京东轮播图的实现(JQuery)

文章目录主要功能:运行图:源代码参考:遗留问题:主要功能:图片可进行左右切换自动轮播效果实现展示图片下方图片列表切换小圆点可随着图片变换同步展示运行图:源代码参考:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s.
复制链接

扫一扫