JavaScript之图片切换（类似淘宝商品图切换）

最新推荐文章于 2024-06-06 10:27:42 发布

知识进脑的肖老千啊

最新推荐文章于 2024-06-06 10:27:42 发布

阅读量3.1k

点赞数 3

分类专栏： HTML JS 文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_50481455/article/details/116050366

版权

JavaScript之图片切换

下边给出几种方法进行图片切换：
方法一（小白专用款！简单易懂）下边附上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换2</title>
    <style type="text/css">
        *{
    
            padding: 0;
            margin: 0;
        }
        #box{
    
            border: 1px solid #ccc;
            width: 450px;
            height: 70px;
            padding-top: 450px;
            background: url("img/big_pic01.jpg") no-repeat;
        }
        #box ul li{
    
            float: left;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li id="item1">
                <img src="img/pic01.webp">
            </li>
        </ul>
        <ul>
            <li id="item2">
                <img src="img/pic02.webp">
            </li>
        </ul>
        <ul>
            <li id="item3">
                <img src="img/pic03.webp">
            </li>
        </ul>
        <ul>
            <li id="item4">
                <img src="img/pic04.webp">
            </li>
        </ul>
        <ul>
            <li id="

最低0.47元/天解锁文章

知识进脑的肖老千啊

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
JavaScript之图片切换（类似淘宝商品图切换）

JavaScript之图片切换下边给出几种方法进行图片切换：方法一（小白专用款！简单易懂）下边附上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片切换2</title> <style type="text/css"> *{ padding: 0;
复制链接

扫一扫