本文作者:心月

通过html+css3实现图片轮播切换

心月IT博客 2019-09-29
通过html+css3实现图片轮播切换摘要:图片轮播切换是网站banner图常用的功能,很多网站的这个功能都是通过js来实现的,自从css3新增动画功能后,图片轮播切换不需要js也可以实现了。

        图片轮播切换是网站banner图常用的功能,很多网站的这个功能都是通过js来实现的,自从css3新增动画功能后,图片轮播切换不需要js也可以实现了。

    下面就让我们来看看如何只通过html+css3实现图片轮播切换效果。

html代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css轮播</title>
    </head>
    <body>
        <!--轮播-->
        <div>
            <!--图片组-->
            <div>
                <img src="3.jpg">
                <img src="5.jpg">
                <img src="4.jpg">
            </div>
            <!--页码-->
            <div>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
        </div>
    </body>
</html>

图片轮播切换前的css样式:

<style type="text/css">
	*{padding: 0;margin: 0;}
	body{
		width: 100vw;
		height: 100vh;
		background: #82ccdd;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	div.scroll-photo{
		position: absolute;
		width: 400px;
		height: 300px;
		overflow: hidden;
	}

	div.photos{
		position: absolute;
		width: 1200px;
		height: 300px;
		z-index: -1;
	}

	div.photos img{
		position: relative;
		width: 400px;
		height: 300px;
		float: left;
	}

	div.index ul{
		position: absolute;
		display: grid;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		list-style: none;
		width: 150px;
		grid-template: 1fr/repeat(3,1fr);
		justify-items: center;
	}

	div.index ul::after{
		content: '';
		position: absolute;
		top: 0;
		left: 12.5px;
		width: 25px;
		height: 25px;
		border-radius: 50%;
		z-index: -1;
		background: #d63031;
	}

	div.index ul li{
		position: relative;
		width: 25px;
		height: 25px;
		border-radius: 50%;
		color: #FFF;
		background: rgba(0,0,0,.5);
		display: grid;
		justify-content: center;
		align-items: center;
	}

</style>

图片切换效果css:

div.photos{
	animation:scroll 6s steps(3,end);
	animation-iteration-count: infinite;
}

div.index ul::after{
	animation:index-scroll 6s steps(3,end);
	animation-iteration-count: infinite;
}

@keyframes scroll{
	to{
		transform: translateX(-1200px);
	}
}

@keyframes index-scroll{
	to{
		transform: translateX(150px);
	}
}

        只需把图片切换效果的css加到上面切换前的css后面即可。

        这里用到的css3属性是animation,animation有个steps属性,它可以指定动画分几步来完成,这里的banner设置了3张图片,所以这里设置动画分3步完成。

transform: translateX(-1200px):3张图片,每张图片的宽度是400,图片轮播是从左到有显示图片,但显示图片的窗口是不动的,所以可以当成把图片往左拉,因此translateX里面的参数是负值。

index-scroll对应的是数字高亮图标的运动。与图片的运动一样,不过方向相反。

最终效果

图片轮播切换效果

文章版权及转载声明:

本文由 心月IT技术博客 博主整理于 2019-09-29
若转载请注明原文及出处:https://www.xinyueseo.com/webfe/336.html

分享到:
赞(
发表评论
快捷输入:

验证码

    评论列表 (有 0 条评论,人围观)参与讨论