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>

效果：

说明：点击1，2，3即可切换相应图片
设计原理通过点击1，2，3来控制 li 的显示与否，从而达到效果

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

vue制作点击切换图片效果
思路创建一个数组,数组里面放入图片,利用props(父组件向子组件传值),v-for(循环),v-bind(绑定属性)将图片传入HTML定义的div中. Ⅰ.在头部导入vue文件(导入前提是vue文 ...
java点击按钮隐藏图片6_原生JS实现隐藏显示图片 JS实现点击切换图片效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求: 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...
hover图片显现遮罩点击切换图片
hover图片显现遮罩点击切换图片代码如下: html: <div class="box"><ul class="imgs">< ...
html原生轮播图的实现,使用原生js实现点击切换图片（轮播图）效果
要实现的功能大致为: 点击两边的切换按钮,可以按顺序切换不同的图片具体操作如下: 一.布局html 1.添加一个div容器 2.添加一个轮播图img标签 3.添加两个按钮img标签二.css样式设 ...
JS点击事件---点击切换图片
一.先上主图二.源码 <!DOCTYPE html> <html lang="zh"> <head><meta charset=&quo ...
【影院选座功能模板】vue实现选座功能，点击切换图片，获取座位信息
前言最近突然看到这个功能了,就想着研究一下如何写, 然后在网上看了一些帖子,总结了一下, 这里套用了一个别人的数据结构,这个感觉毕竟好用. 然后写一个简单的模板放在这,以后可能会再这个基础上修改或者 ...
html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
135编辑器html点击图片播放音乐,怎么用135编辑器排版公众号怎么做点击切换图片...
最佳答案 135是一款方便实用的排版编辑器,可以进行图文等很多功能的编辑,也是很受欢迎的.下面就给大家介绍一下用135编辑器怎么排版. 操作方法 [01]首先我们在浏览器中搜索"135&qu ...
android 照片点击查看,Android PhotoView点击放大图片效果
使用的PhotoView是这个版本的,比较小巧,很好用,比github上另一个版本的瘦身很多:https://github.com/bm-x/PhotoView 基本测试代码如下:import jav ...

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

css3代码部分

html代码部分

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

最新文章

热门文章