登录  /  注册
首页 > web前端 > css教程 > 正文

css制作轮播图

王林
发布: 2020-02-29 18:01:52
转载
2569人浏览过

css制作轮播图

下面是style部分:

<style>
    *{margin:0;padding:0;}
    a{text-decoration:none}
    li{list-style:none;}
登录后复制

设计宽度不要超过轮播图片的总宽度,再加上第一张图片的宽度(加第一张图片的宽度是为了轮播效果看得见)我的是1500宽度和200的高度,再设置溢出隐藏(消除移动出显示区域还在显示)

#box{width:1500px;height:200px;margin:0 auto;overflow:hidden;}
登录后复制

1000%是比较懒的写法,为了把ul的宽度设置的宽一点。

(推荐教程:CSS入门教程

轮播的动画的名字,多少时间轮播一次

#box ul{height:200px;width:1000%;animation:animal 4s linear infinite;}
登录后复制

设置浮动让所有图片一行显示和图片的宽度

#box ul li{float:left;width:133px;height:200px;}
登录后复制

设置鼠标滑过暂停

#box:hover ul{animation-play-state:paused;}
登录后复制

设置动画的动画名和轮播图移动方向(动画效果)

    @keyframes animal {
        0%{margin-left:0;}
        100%{margin-left:-1463px;}
    }
</style>
登录后复制

下面是body部分

轮播图一般都可以点击访问,所以放在a标签内

<body>
<div id="box">
<ul>
    <li><a href="#"><img  src="images/1.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/2.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/3.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/4.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/5.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/6.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/7.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/8.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/9.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/10.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/11.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/1.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/2.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/3.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/4.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/5.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/6.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/7.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/8.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/9.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/10.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/11.jpg" / alt="css制作轮播图" ></a></li>
    <li><a href="#"><img  src="images/1.jpg" / alt="css制作轮播图" ></a></li>
</ul>
</div>
</body>
登录后复制

更多编程相关内容,请关注php中文网编程入门栏目!

以上就是css制作轮播图的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:脚本之家网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号