前端:纯css实现图片轮播(自动+手动)

这篇具有很好参考价值的文章主要介绍了前端:纯css实现图片轮播(自动+手动)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1.图片自动轮播

2.图片手动轮播

3.补充内容


1.图片自动轮播

创建2个盒子,一个盒子进行轮播图展示,一个盒子用来承载图片

<body>
        <!-- 创建外部展示容器 -->
		<div class="banner-container">
            <!-- 创建图片储存容器 -->
            <div class="banner-img-container">
                <img src="./img/banner01.png" alt="">
                <img src="./img/banner02.png" alt="">
                <img src="./img/banner03.png" alt="">
                <img src="./img/banner04.png" alt="">
                <img src="./img/banner05.png" alt="">
            </div>
        </div>
	</body>

CSS重置reset.css & normalize.css,在写页面时,由于HTML标签自带一些CSS属性,导致在调试样式的时候会出现各种奇怪的问题,为了大概率避免这些问题,在写CSS之前可以引用一下代码。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


 autoMatic.css,通过创建动画,来实现图片的轮播,动画就是将一套 CSS 样式逐渐变化为另一套样式。在动画过程中,能够多次改变这套 CSS 样式。


/* 自动轮播样式 */
.banner-container{
	width:1200px;
	height:400px;
	/* 轮播图居中 */
	margin:1rem auto;
	/* 隐藏超出展示容器的内容 */
	overflow: hidden;
	position: relative;
}

.banner-container .banner-img-container {
	width:6000px;
	height:400px;
	overflow: hidden;
	position: absolute;
	/* 开启弹性盒,让图片横向排列 */
	display: flex;
   /* animation,@keyframes 搭配使用  run为自定义名称,10s时间*/
	animation: run 10s ease infinite;
}

.banner-container .banner-img-container img{
	width:1200px;
	height:100%;
}

/* 动画关键帧 */
/* 以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。0% 是动画的开始时间,100% 动画的结束时间。 */
@keyframes run {
	0%,10%{
		/* margin-left: 0; */
		transform: translateX(0);
	}
	20%,30%{
		/* margin-left: -1200px;; */
		transform: translateX(-1200px);
	}
	40%,50%{
		/* margin-left: -2400px; */
		transform: translateX(-2400px);
	}
	60%,70%{
		/* margin-left: -3600px; */
		transform: translateX(-3600px);
	}
	80%,90%{
		/* margin-left: -4800px; */
		transform: translateX(-4800px);
	}
	100%{
		/* margin-left: 0; */
		transform: translateX(0);
	}
}

2.图片手动轮播

锚 URL - 指向页面中的锚,即指向图片存储路径

 <!-- 创建外部展示容器 -->
        <div class="banner-container">
            <input type="radio" name="radio-set" checked="checked" id="banner-control-1"/>
            <a class="banner-nav-a" href="#banner01"></a>
            <input type="radio" name="radio-set"  id="banner-control-2"/>
            <a class="banner-nav-a" href="#banner02"></a>
            <input type="radio" name="radio-set"  id="banner-control-3"/>
            <a class="banner-nav-a" href="#banner03"></a>
            <input type="radio" name="radio-set"  id="banner-control-4"/>
            <a class="banner-nav-a" href="#banner04"></a>
            <input type="radio" name="radio-set"  id="banner-control-5"/>
            <a class="banner-nav-a" href="#banner05"></a>
            <!-- 创建图片储存容器 -->
            <div class="banner-img-container">
                <img id="banner01" src="./img/banner01.png" alt="">
                <img id="banner02" src="./img/banner02.png" alt="">
                <img id="banner03" src="./img/banner03.png" alt="">
                <img id="banner04" src="./img/banner04.png" alt="">
                <img id="banner05" src="./img/banner05.png" alt="">
            </div>
        </div>

manual.css


/* 手动轮播样式 */
.banner-container{
	width:1200px;
	height:400px;
	margin:1rem auto;
	overflow: hidden;
	position: relative;
}

.banner-container .banner-img-container {
	width:6000px;
	height:400px;
	overflow: hidden;
	position: absolute;
	display: flex;
	transition: transform 0.6s ease;
}

.banner-container .banner-img-container  img{
	width:100%;
	height:100%;
}

/* 轮播图圆点样式 */
.banner-container a {
	width:24px;
	height:24px;
	background:#87c8eb;
	position: absolute;
	bottom:1rem;
	border-radius: 100%;
	margin:0;
	z-index: 1;
}

.banner-container input{
	width:24px;
	height:24px;
	position: absolute;
	bottom:1rem;
	margin:0;
	cursor: pointer;
	z-index: 2;
	opacity: 0;
}

/* 设置导航圆点偏移量(居中布局)*/
#banner-control-1,#banner-control-1 + .banner-nav-a{
    left: 30%;
}
#banner-control-2,#banner-control-2 + .banner-nav-a{
    left: 40%;
}
#banner-control-3,#banner-control-3 + .banner-nav-a{
    left: 50%;
}
#banner-control-4,#banner-control-4 + .banner-nav-a{
    left: 60%;
}
#banner-control-5,#banner-control-5 + .banner-nav-a{
    left: 70%;
}

/* 设置高亮 */
/*当 input 被选中时 他的兄弟级a标签高亮展示*/
input:checked + .banner-nav-a {
    background-color: #ad244f;
}

/* 设置轮播图动画 */
#banner-control-1:checked ~ .banner-img-container{
	transform: translateX(0px);
}
#banner-control-2:checked ~ .banner-img-container{
	transform: translateX(-1200px);
}
#banner-control-3:checked ~ .banner-img-container{
	transform: translateX(-2400px);
}
#banner-control-4:checked ~ .banner-img-container{
	transform: translateX(-3600px);
}
#banner-control-5:checked ~ .banner-img-container{
	transform: translateX(-4800px);
}

3.补充内容

最后附布局引用图

网页图片自动轮播代码,前端,前端,css

css文件引用

网页图片自动轮播代码,前端,前端,css文章来源地址https://www.toymoban.com/news/detail-764066.html

到了这里,关于前端:纯css实现图片轮播(自动+手动)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML+CSS+JavaScript:轮播图的自动播放、手动播放、鼠标悬停暂停播放

    昨天我们做了轮播图的自动播放,即每隔一秒自动切换一次 今天我们增加两个需求: 1、鼠标点击向右按钮,轮播图往后切换一次;鼠标点击向左按钮,轮播图往前切换一次 2、鼠标悬停在轮播图区域中时,轮播图暂停播放   以下是缺失JS部分的代码,感兴趣的小伙伴可以先

    2024年02月14日
    浏览(48)
  • 前端,CSS,背景颜色跟随轮播图片改变而改变(附源码)

    首先看效果! 比如轮播图时红色,那么背景的底色也是红色,轮播图时黄色,背景的底色也是黄色,这就是根据轮播图的图片切换,而改变背景颜色随轮播图颜色一致 话不多说,直接上代码!非常简单 轮播图代码就不放上去了,直接使用插件 swiper ,选择你喜欢的版本 就可

    2024年02月22日
    浏览(48)
  • web前端【3】JS基础-轮播图【JavaScript、定时器、鼠标动作、自动轮播、增加和减少li列表】

    一、实验题目: 轮播图 二、实验内容简介 1.整体布局:图片、左右按钮、数字列表、添加删除按钮 2、左右箭头滚动 3、小圆点滚动 4、自动轮播 5、鼠标动作:指向和离开 6、添加与删除 三、实验过程 1. 需求分析 整体布局:设计一个轮播图,中间部分为自动轮播的图片展示

    2024年02月04日
    浏览(57)
  • 如何使用CSS实现一个无限循环滚动的图片轮播效果?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月11日
    浏览(48)
  • echarts饼图:实现多层图表同步自动轮播,鼠标悬浮时停止轮播,移出鼠标后重新开始轮播效果

    需要用echarts实现一个圆环饼图,在圆环中心显示每个系列的具体数据,加载成功后图表系列自动高亮轮播展示;当用户鼠标悬浮某一系列的图形时,停止自动轮播并高亮显示该图形,移出鼠标后重新开始轮播 echarts圆环饼图示例 (开发echarts图表时,对照配置项文档和API文档

    2024年02月13日
    浏览(56)
  • 网页轮播图制作(html+css+js)

            目的:用于自己做记录,记录制作的过程以及遇到的一些问题。内容参考来自b站的up主:黑马前端 的pink老师JavaScript基础语法课程。 (1)当鼠标经过轮播图,左右两边的按钮出现,离开则隐藏按钮; (2)点击左侧按钮,图片向右播放一张,以此类推,右侧同理;

    2024年02月08日
    浏览(54)
  • 英雄联盟轮播图自动轮播

    六月过去了,七月还会远吗?不知不觉到了六月底的最后一天。你好,七月! 大家好,我是小陈陈呀,上次写了一篇英雄联盟轮播图手动轮播,当天晚上有很多大朋友小朋友私信小陈陈:可以在上次手动轮播的基础上,实现自动轮播的话,那样会不会更炫酷呢?炫不炫酷我不

    2023年04月08日
    浏览(45)
  • 使用JavaScript实现图片的自动轮播

    在网站开发中,经常会遇到需要展示多张图片并自动切换的需求,这就需要使用JavaScript来实现图片的自动轮播功能。本文将通过一个简单的例子,演示如何用JavaScript实现图片的自动轮播。 HTML结构: 首先, 创建一个包含图片列表的HTML结构,每个图片都用一个标签表示,并设

    2024年02月05日
    浏览(43)
  • web前端期末大作业——HTML+CSS简单的旅游网页设计与实现

    👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓,一般的网页作业需要融入以下知识点:div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点,学生网页作业源码,制作水平

    2024年02月09日
    浏览(78)
  • 微信小程序(原生)——轮播图swiper、1秒切换、自动轮播、无缝切换

    微信小程序的轮播图制作,且图片不变形。1秒切换、自动轮播、无缝切换 index.wxml文件: index.wxss文件: 完整示意图 swiper网址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html image网址:https://developers.weixin.qq.com/miniprogram/dev/component/image.html 图片处理方面: mode=\\\"aspectFi

    2024年02月15日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包