使用css3和h5实现幻灯片，点击切换图片效果

电玩女神 2024-04-18 21:41 55阅读 0赞

# css3代码部分 #

<style>
         *{
             padding: 0;
             margin: 0;
         }
         .box{
             display: block;
             width: 300px;
             height: 70px;
         }
         ul{
            display: block;
             width: 300px;
             height: 70px;
             overflow: hidden;
         }
         li{
             display: none;
             width: 300px;
             height: 70px;
         }
         li img{
             display: block;
             width: 300px;
             height: 70px;
         }
         input{
             display: none;
         }
         #button-1:checked~ul li:nth-child(1),
         #button-2:checked~ul li:nth-child(2),
         #button-3:checked~ul li:nth-child(3){
             display: block;
         }
    
         label{
             position: relative;
             top: -20px;
             left: 50px;
             display: inline-block;
             width:20px;
             height: 20px;
             background: red;
             cursor: pointer;
         }
        </style>

# html代码部分 #

<div class="box">
            <input type="radio" name="button" id="button-1" checked="checked">
            <input type="radio" name="button" id="button-3">
            <input type="radio" name="button" id="button-2">
    
            <ul>
                <li><img src="mc.png" alt=""></li>
                <li><img src="lb.jpg" alt=""></li>
                <li><img src="zgl.jpg" alt=""></li>
    
            </ul>
            <label for="button-1">1</label>
            <label for="button-2">2</label>
            <label for="button-3">3</label>
        </div>

效果：  
![在这里插入图片描述][20190912105043700.png]  
说明：点击1，2，3即可切换相应图片  
设计原理通过点击1，2，3来控制 li 的显示与否，从而达到效果

[20190912105043700.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/87612952fed44304b9052c91e582cce0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，55人围观）

还没有评论，来说两句吧...

相关阅读

相关使用css3和h5实现幻灯片，点击切换图片效果

css3代码部分 <style> *{ padding: 0; margin: 0; ...

电玩女神/ 2024年04月18日 21:41/ 0 赞/ 56 阅读

相关 Fragment+RadioButton实现点击切换页面效果

`首先，我们需要在主布局文件中activity_main.xml 放一个容器，方便让fragment加入进去,底部导航栏使用RedioButton切换页面，每一个RadioB

水深无声/ 2023年10月17日 13:02/ 0 赞/ 150 阅读

相关练习：js实现点击切换图片

点击切换图片，控制是否可以循环切换 <!DOCTYPE html> <html lang="en"> <head> <met

Dear 丶/ 2023年07月07日 11:05/ 0 赞/ 188 阅读

相关用原生js实现轮播图效果，点击切换图片、定时切换

其实轮播图挺简单的，功能实现就是Javascript 不懂的朋友可以私信我哦！要想效果好，边框阴影加圆角： 1：边框 boder 2：阴影 shadow(box-

r囧r小猫/ 2023年07月03日 10:51/ 0 赞/ 156 阅读

相关使用ASP.NET AJAX实现(图片)幻灯片效果

(1)html <%@ Page Language="C\" AutoEventWireup="true" CodeFile="Photo.aspx.cs" Inhe

清疚/ 2022年10月02日 14:49/ 0 赞/ 143 阅读

相关使用css来实现幻灯片的效果

使用css来实现幻灯片的效果（1）自动轮播，鼠标移入停止播放，鼠标移出继续播放，但是不能设置按钮自动播放，不能点击一个点跳转到对应的图片思路：切换图片就是像上面js那样

╰半夏微凉°/ 2022年04月12日 12:59/ 0 赞/ 365 阅读

相关选项卡切换效果，点击切换图片

今天分享一篇前端开发实战当中经常使用到的选项卡切换效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构布局： <div id="box">

太过爱你忘了你带给我的痛/ 2022年04月06日 05:41/ 0 赞/ 370 阅读

相关 js点击切换图片

<style type="text/css"> { margin: 0; padding: 0; }

港控/mmm°/ 2022年01月14日 09:41/ 0 赞/ 438 阅读

相关 JS实现图片幻灯片效果

代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TI

心已赠人/ 2021年11月11日 23:28/ 0 赞/ 450 阅读

相关 css3动画实现最简单的幻灯片效果

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">

约定不等于承诺〃/ 2021年09月19日 16:46/ 0 赞/ 355 阅读