css实现轮播图

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

轮播图:就是多张图片按照一定的时间和顺序依次从某个窗口来向用户展示图片

轮播图的实现代码:

1)创建一个容器来进行轮播图的展示

这里的容器就是最外部的盒子

注意最外部盒子设置宽高时要与我们进行展示的图片的宽高保持一致,这样就可以保证一次轮播一张图片

最外部的盒子
<div class="box1></div>
最外部盒子的css样式
.box1{
width:722px;
height:358px;
margin:0 auto;
overflow: hidden; 
}

/* overflow: hidden;css实现轮播图 溢出隐藏 并且不占有位置 当没有添溢出隐藏时 图片的展示如上图所示  */

 2)创建一个盒子来存存储所有的图片

<div class="box"></div>
放置所有的图片的容器的样式的设置 这里为了让所有的图片在一行显示如上图所示,需要给盒子足够的宽,
.box{
width:2200px;
height:352px;
}

同时第一个盒子添加  overflow: hidden; 呈现出来的总体样式是

css实现轮播图

 这是因为其他图片隐藏了

3)添加图片

css实现轮播图

这里为盒子里面的图片设置样式:
 .box img{
      float: left;
     height: 352px;
     width: 722px;
    }

 4)这是最重要的一步 css动画的添加实现图片轮播

CSS 动画用于实现元素从一个 CSS 样式配置转换到另一个 CSS 样式配置。

动画包括两个部分:描述动画的样式规则和用于指定动画开始,结束以及中间

css实现轮播图

  animation: move 20s infinite;   这里使用了 animation 的简写属性,将动画与div 元素绑定

然后利用:@keyframes 规则进行图片轮播。

transform:translate();的应用 请参考:

http://t.csdn.cn/o8Wns

上完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
</head>
<!-- style 里面是css样式 因为代码较少就没有再次创建 -->
<style>
    /* 盒子1的样式 */
    .box1{
width:722px;
height:358px;
margin: 0 auto;
/* 超出的位置将隐藏并且不占位 */
overflow: hidden;  
    }
    .box{
        width: 2200px;
        height: 352px;
        animation: move 20s infinite;
    }
    @keyframes move {
       0%{
           transform: translateX(0);
       }
       30%{
           transform: translateX(-722px);
       }
       60%{
           transform: translateX(-1422px);
       }
       100%{
           transform: translateX(-1422px);
       }
    }
    .box img{
      float: left;
     height: 352px;
     width: 722px;
    }

</style>
<body>
    <div class="box1">
        <div class="box">
            <img src="./images/img.jpg" alt="">
            <img src="./images/img2.jpg" alt="">
            <img src="./images/img3.jpg" alt="">
        </div>
    </div>
</body>
</html>

 渐变实现轮播图:

渐变实现轮播图相对来说比较简单,这里是把图片叠放在一个盒子里让上面的图片颜色渐渐变淡下面的图片显示出来,这里我把图片放进了样式里面这是一种比较取巧的方法

建议叠放图片参考

http://t.csdn.cn/8HEk3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
</head>
<!-- style 里面是css样式 因为代码较少就没有再次创建 -->
<style>
    /* 盒子1的样式 */
    .focus{
        margin:0 auto;
        width: 700px;
        height: 322px;
        animation: focus 20s infinite;
    }
    @keyframes focus {
       0%{
         background-image: url("./images/img.jpg");
       }
       50%{
        background-image: url("./images/img2.jpg");
       }
       100%{
        background-image: url("./images/img3.jpg");
       }
    }
</style>
<body>
    <div class="focus">
    </div>
</body>
</html>

作者是一个萌新小白如果有什么错误欢迎指出,互相交流共同成长,文章有借鉴下面两位大大的博客,勿见怪!!!!

http://t.csdn.cn/DBjqm 自动轮播图的借鉴

http://t.csdn.cn/cjcxz 渐变轮播图的借鉴

图片来源:王者荣耀官方网站文章来源地址https://www.toymoban.com/news/detail-406742.html

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

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

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

相关文章

  • 使用vant+video.js实现轮播图图片和视频轮播播放

    先上效果图 1. 安装 2. 在需要用到的页面引入 3. 具体页面使用 假设传给子组件的数组结构 按照步骤来使用,其他地方视频播放情况都还好,至少安卓是好的,只是点击播放和暂停时候,ios需要点击多下才能触发点击事件; 然后以为是video.js插件可能没更新,ios版本迭代超过

    2023年04月08日
    浏览(47)
  • 微信小程序02-轮播图实现与图片点击跳转

    在小程序01中,已经学习了如何制作底部导航栏,本节让我们一起学习如何制作轮播图,以及点击轮播图完成页面跳转。 注:(1)前期学习,我这里用的本地的图片,后期的话,会对接后端接口,动态获取数据,前期方便学习,就暂时用的本地图片。(2)关于图片跳转地址

    2024年02月16日
    浏览(87)
  • vue 实现钉钉官网的轮播图下面功能滚动排版CSS效果

    前言 最近在写PC端的业主端时候,发现传统的菜单栏比较丑,也不符合实际应用(功能页面并不多-展示为主) 偶然发现钉钉官网的效果挺有意思的,想着把这个效果复原过来,然后夸夸搜索了一番。 经过一顿的cv打法,加上修修补补把大概的效果整了出来,时间关系最基础

    2024年02月11日
    浏览(56)
  • 基于html+js实现轮播图(自动轮播、左右按钮、小圆点点击及切换图片)

    使用html和js实现的一个简单小练习轮播图。大概功能主要是: 1、使用时间函数自动切换图片; 2、在图片及按钮及小圆点的父节点身上绑定事件代理,添加mouseenter及mouseleave事件类型,让鼠标移入,图片暂停,移出,图片恢复轮播; 3、在按钮的父节点身上绑定事件代理,事

    2024年02月11日
    浏览(44)
  • CSS3 -- 3D轮播图

    今天在完善我自己的个人网站时,要做一个3D轮播图,就是一个六边体,在六边体的每个面都放一张图片,但是每个边之间都会有一定的间距,效果如下: 点击两边的按钮会旋转切换图片,每隔4秒会自动切换。 在我初学的时候我觉得这个效果非常的有意思,很高大上,哈哈

    2024年02月12日
    浏览(44)
  • css3轮播图案例

    轮播图案例

    2024年01月20日
    浏览(55)
  • HTML+CSS+JavaScript:轮播图自动播放

    轮播图如下图所示,需求是每隔一秒轮播图自动切换一次   以下是缺失JS部分的代码,感兴趣的小伙伴可以先自己试着写一写 1、将代码素材在浏览器中打开,并按F12进入开发者模式,分析各个HTML标签在轮播图中的位置及作用 2、获取相关元素 3、利用间歇函数实现一秒切换一

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

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

    2024年02月08日
    浏览(54)
  • 纯css3的网站轮播图animation练习2

     

    2024年02月11日
    浏览(43)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包