纯CSS实现图片自动切换，鼠标点击切换相结合

最新推荐文章于 2025-05-07 10:13:36 发布

smilingovo

最新推荐文章于 2025-05-07 10:13:36 发布

阅读量7.5k

点赞数 12

CC 4.0 BY-SA版权

分类专栏： css3 文章标签： css css3 html html5

本文链接：https://blog.youkuaiyun.com/smily_forever/article/details/107151142

纯CSS实现图片自动切换，鼠标点击切换相结合

图片自动切换实现原理：使用一个div并设置溢出隐藏来只显示一次一张图片，同时设置另一个div（总图片div），尺寸为所有图片横排的总尺寸宽高，作为动画顺序播放，然后使用css3动画，通过对div（总图片div）进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。5张图片，需要切换4次。
鼠标实现图片切换原理：通过设置每个超链接的宽度高度，并使用position定位到指定位置，编写每一个超链接的动画来分别切换相应图片的位置，使用hover，当鼠标放在指定超链接上时，实现指定的动画切换到目标图片上。
代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片切换</title>
		<style type="text/css">
			html,body{
   
   height: 100%;background-image: url(img/bac.jpg);background-repeat: no-repeat;background-size: 100% 100%;}
			*{
   
   margin: 0;padding: 0;}
			#main{
   
   
				width: 800px;height: 460px;
				overflow: hidden;position: absolute;left:22.5%;top: 15%;border-radius: 20px;
				
			}
			#all-picture{
   
   
				height:460px;
				width: calc(800px * 5);/*如果加图片自行添加数目我这里5张图片所以宽度为5张图片横排的总尺寸，注意添加图片数目之后，动画内的参数也要相应的改变*/
				animation: switch ease 15s infinite ;z-index: 9;
			}
			#all-picture img{
   
   
				widt