图片轮播的实现

简介: 图片轮播的实现

1.图片轮播(使用动画,根据图片不同时间的移动值来实现,图片排放在一个容器中,图片大小要与容器大小一致)

#photo>img{
    float:left;
    width:330px;
    height:470px;
  }
  #photo{
    width:1650px;
    animation:switch 7s ease-out infinite;
  }
 <div id="container">
                    <div id="photo">
                      <img src="images/dushu2.jpg">
                      <img src="images/dushu3.jpg">
                      <img src="images/book (4).jpg">
                      <img src="images/book (5).jpg">
                      <img src="images/dushu (6).jpg">
                    </div>
 </div>

上述每个图片宽度为330px;

img第一外层的photo为图片容器,即在此盒子中放了5张图片;图片中有添加 float的效果,这样就不用考虑去边距问题。

#container{
    width:990px;
    height:450px;
    overflow: hidden; 
      }

img第二外层的container为所展示图片的容器,上述所展示为3张,剩余两张图片溢出使用overflow:hidden来将其隐藏起来

 #photo{
    width:1650px;
    animation:switch 7s ease-out infinite;
  }
@keyframes switch{
    0%,25%{margin-left: 0;}
    35%,65%{margin-left:-330px;}
    75%,100%{margin-left: -660px;}
  }

上述为使所展示的容器中均有3张图片,一共5张图片,第一阶段展现出来的即为前三张;第二阶段第一张图片左一一个宽度展现出来的为第2,3,4张图片;第三阶段移动2个图片的宽度展现出来后3张图片。

该动画一个周期为7s,且以慢速 无限循环;

35%~65%为图片停留阶段,和第一阶段空出来的时间为动画切换的部分;

2.图片渐变轮播(实现前面图片消失时后一个隐隐出现的效果)

<div id="RotationPicture">
          <div id="screen">
               <a href="#"target="_blank"><img src="images/QQ图片.jpg" width=100%;height=100%;></a>
               <a href="#"target="_blank"><img src="images/two.jpg" width=100%;height=100%;></a>
               <a href="#"target="_blank"><img src="images/four.png" width=100%;height=100%;></a>
               <a href="#"target="_blank"><img src="images/three.png" width=100%;height=100%;></a>
           </div>
 </div>

先创建轮播图片的div,id为RotationPicture,在创建一个放入图片的div,id为screen,其中放了4张图片链接。

将图片设为宽度和高度都设置成100%,可以使整个图片显示出来;自由缩放图片且图片放大的尺寸不大于其原始值可以将其设置为max-weight:100%;height:auto;;背景图片可以使其为background-size:100%;使整个背景图片完全放入div中。

#RotationPicture{
    height:50px;
}
#screen a{
    position:absolute;
    animation: donghua 12s Infinite;
}
@keyframes donghua{
    0%{opacity: 0;}
    3%{opacity:1;}
    25%{opacity: 1;}
    28%{opacity: 0;}
}
#screen a:nth-child(1){animation-delay:0s}
#screen a:nth-child(2){animation-delay:3s}
#screen a:nth-child(3){animation-delay:6s}
#screen a:nth-child(4){animation-delay:9s}

先要设置容器的大小位置;动画周期为12s,无限循环;animation-delay为动画延迟时间,即第二张图片于整个阶段第3s开始播放,第3张图片于第6s开始播放;0%-3%中有3%的过渡时间(12s的3%),从刚刚开始的完全透明逐渐过渡到完全不透明,25%-28%再由完全不透明逐渐过渡到完全透明,实现前一张图片消失,同时后一张图片出现的效果。


相关文章
|
Java Linux 定位技术
企业实战(21)基于Linux下安装部署GeoServer地图服务
企业实战(21)基于Linux下安装部署GeoServer地图服务
709 0
|
小程序 前端开发 iOS开发
uView内置样式
uView内置样式
255 1
|
11月前
|
缓存 网络协议 网络安全
/mydata *(rw,sync,no_subtree_check)什么意思?
/mydata *(rw,sync,no_subtree_check)什么意思?
241 1
|
关系型数据库 MySQL
mysql中有大量sleep进程的原因与解决办法
mysql中有大量sleep进程的原因与解决办法
1032 0
|
机器学习/深度学习 搜索推荐 算法
利用机器学习算法增强IAA广告定位和预测:实现个性化广告投放以最大化收益
【7月更文第30天】在当今高度竞争的移动应用市场中,应用内广告(IAA)是许多开发者获取收入的重要途径之一。然而,传统的广告推送方式往往忽略了用户的个体差异性,导致广告效果不佳。通过运用机器学习技术,我们可以更准确地理解用户偏好,从而实现个性化的广告推送。
700 0
|
11月前
|
安全 Java API
深入探索Java网络编程中的HttpURLConnection:从基础到进阶
本文介绍了Java网络编程中HttpURLConnection的高级特性,包括灵活使用不同HTTP方法、处理重定向、管理Cookie、优化安全性以及处理大文件上传和下载。通过解答五个常见问题,帮助开发者提升网络编程的效率和安全性。
471 9
|
编解码 Linux 开发工具
大牛直播SDK跨平台RTMP直播推送模块技术设计和功能列表
大牛直播SDK是一款跨平台RTMP直播推送模块,支持Windows、Linux(x64_64与aarch64架构)、Android及iOS平台。该SDK功能全面,包括摄像头、屏幕、麦克风等数据采集与推送,并支持编码前后数据对接。其架构设计优秀,确保低延迟与高效率,结合SmartPlayer播放器实现毫秒级延迟体验。具备全自研框架,易于扩展且支持多种数据源接入,如外部YUV/RGB/H.264等格式。此外,各平台支持特性丰富,如Windows平台支持多摄像头合成,Android与iOS平台支持前后摄像头实时切换等。大牛直播SDK还提供了多个示例项目以帮助开发者快速上手。
387 0
|
算法 测试技术 数据处理
实时目标检测神器:YOLOv5的安装与使用详解
实时目标检测神器:YOLOv5的安装与使用详解
638 1
|
SQL 存储 数据库
48. 【Android教程】数据库:SQLite 的使用
48. 【Android教程】数据库:SQLite 的使用
327 1
|
XML Java Android开发
Android Studio App开发之列表类视图中基本适配器BaseAdapter的使用及实战(附源码 超详细)
Android Studio App开发之列表类视图中基本适配器BaseAdapter的使用及实战(附源码 超详细)
387 0