（39）css3实现轮播图效果

css3的轮播图和js的轮播图的区别？

css3：没有一些js的逻辑，优点，过渡动画比较漂亮，缺点：兼容问题。无法实现自动轮播和点击轮播一起同时出现的效果。

js轮播图：js逻辑很多，可以做的很复杂，可以实现点击轮播和自动轮播同时生效的轮播图，缺点：过渡效果不好看。

<!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>css3实现轮播图效果</title><style>/*清除默认样式*/body,div,input,label {margin: 0;padding: 0;}/*外部盒子*/.box {position: relative;width: 450px;height: 300px;margin: 50px auto;border: 1px solid #000;overflow: hidden;}  .box input {/* 将input与label绑定，在把input隐藏掉，点击label的效果和input一样 */display: none;}.box .pic {/* 图片盒子 */position: absolute;left: 0;/* 让图片盒子装满所有图片的尺寸 */width: 5000px;height: 300px;/* 添加过渡动画效果 */transition: all 2s ease 0s;/* transition属性需要考虑兼容性 */-webkit-transition: all 2s ease 0s;animation: move 5s ease infinite 0s;}.box .pic img {/* 将图片设置左浮动 */float: left;width: 450px;height: 300px;}.box .page {position: absolute;left: 100px;bottom: 50px;width: 200px;height: 20px;}.box .page label {/* 将label按钮左浮动 */float: left;/* 每一个按钮都是20的宽高度 */width: 20px;height: 20px;/* 设置边框圆角 */border-radius: 50%;/* 每一个按钮的右侧都有间距 */margin-right: 20px;background-color: #fff;}/* 当input1或者label第一个被选中时它的兄弟元素pic进行left偏移。 *//* 1.实现点击轮播，transition */.box #page1:checked ~.pic {left: 0;}/* 偏移一个图片的宽度 */.box #page2:checked ~.pic {left: -450px;}/* 偏移两个图片的宽度 */.box #page3:checked ~.pic {left: -900px;}/* 2.实现自动轮播@keyframes +  animation */@keyframes move {0% {left:0;}33.33% {left:-450px;}66.66% {left: -900px;}100% {left: -1350px;}}/* @keyframes也有浏览器兼容问题 */@-webkit-keyframes move {0% {left:0;}33.33% {left:-450px;}66.66% {left: -900px;}100% {left: -1350px;}}</style>
</head>
<body><div class="box"><input type="radio" name="slider" id="page1" checked><input type="radio" name="slider" id="page2"><input type="radio" name="slider" id="page3"><div class="pic"><img src="data:images/1.jpg" alt=""><img src="data:images/2.jpg" alt=""><img src="data:images/3.jpg" alt=""><!-- 如果是自动轮播需要将第一张图片作为第4张 --><img src="data:images/1.jpg" alt=""></div><div class="page"><label for="page1"></label><label for="page2"></label><label for="page3"></label></div></div>
</body>
</html>

（39）css3实现轮播图效果相关推荐

html轮播台袋效果,css3百叶窗轮播图效果
标题 #Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/ position:relative;} #con ...
css33d图片轮播_手把手教你用纯css3实现轮播图效果
首先先看demo吧,点击查看demo 一.随便说几句 css3动画效果的强大不言而喻,自它出现一直热度不减,它与js动画的优劣也一直成为前端界争论的话题,不可置疑的是css3动画的出现在一定程度上降低 ...
css33d图片轮播_手把手教你用纯css3实现轮播图效果实例
首先先看demo吧,点击查看demo 一.随便说几句 css3动画效果的强大不言而喻,自它出现一直热度不减,它与js动画的优劣也一直成为前端界争论的话题,不可置疑的是css3动画的出现在一定程度上降低 ...
【每日一练】39—七夕节背景轮播图效果的实现
作者 | 杨小爱写在前面今天是七夕节,在这里,我先祝大家七夕节快乐,有情人终成眷属.我们节也要过,学习也要继续,因此,今天我们来实现一个漂亮的七夕幻灯轮播图效果,这个效果我个人觉得非常实用,如果你 ...
纯css3实现无缝轮播图效果
主要就是利用css3中的动画了,看完整实现代码如下: <!DOCTYPE html> <html lang="en"> <head><me ...
纯CSS实现轮播图效果，你不知道的CSS3黑科技
前言轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...
纯CSS3实现轮播图
前言纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...
css3轮播不用jpuery_js和CSS3 3D轮播图
这是一款js和CSS3 3D轮播图.这组3D轮播图中,共演示了6种轮播图效果.这些3D轮播图都是通过简单的JS代码配合CSS3来完成的. 使用方法 HTML结构以8张图片的3D轮播图为例,它的基本H ...

（39）css3实现轮播图效果

css3的轮播图和js的轮播图的区别？

（39）css3实现轮播图效果相关推荐

最新文章

热门文章