CSS3 实现简单轮播图
用css3动画实现图片切换效果,原理还是改变left值。只有最简单的自动播放功能,切换后短时间静止,通过最后的位置克隆第一张图片,实现无缝切换。
html结构
<div id="container">
<ul class="pic">
<li><a href="javascript:;"><img src="data:images/DSC01627.jpg" alt="pic1"></a></li>
<li><a href="javascript:;"><img src="data:images/DSC01628.jpg" alt="pic2"></a></li>
<li><a href="javascript:;"><img src="data:images/DSC02637.jpg" alt="pic3"></a></li>
<li><a href="javascript:;"><img src="data:images/DSC01627.jpg" alt="pic1"></a></li><!-- 克隆第一张 -->
</ul> </div>
css样式
*{
margin:;
padding:;
text-decoration: none;
}
ul{
list-style: none;
} #container{
position: relative;
width: 400px;
height: 200px;
overflow: hidden;/*隐藏溢出的图片*/
}
.pic{
width:1600px;/*4张图的宽度*/
position: absolute;/*基于父容器进行定位*/
left:;
animation-name: focusmap;
animation-duration: 12s;
animation-iteration-count: infinite;//动画调用可以简写 }
@keyframes focusmap {
0%,30%{
left:;
}
35%,65%{
left: -400px;
}
70%,99%{
left: -800px;
}
100%{
left: -1200px;
} }
.pic li{
float: left;
background: #5dd94e;
} .pic li img {
width: 400px;
height: 200px;
}
CSS3 实现简单轮播图的更多相关文章
- JS---案例:简单轮播图
案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...
- CSS3,3D效果轮播图
---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...
- 手把手原生js简单轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- (新手向)基于Bootstrap的简单轮播图的手机实现
个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...
- js写的简单轮播图
这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...
- 原生js简单轮播图 代码
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- 用jquery制作的简单轮播图
我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...
- javascript简单轮播图
**轮播图实现原理: 通过多张图片平铺,用overflow:hidden只显示一张图片.其他的隐藏,无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果.** HTML布局和内容: 1.容器c ...
- vue上的简单轮播图
好久没写轮播图了,今天在vue上写了个超简单的,效果还ok. .moveLeft{position:relative;right:ZOOMpx;transition:all 1s;} 原理是滚动时利用 ...
随机推荐
- Arcgis10.2 破解注意问题
Arcgis10.2 破解注意问题 2014年11月17日 20:22 按照网上教程直接替换service.txt和arcgis.exe之后 需要重新启动license服务 可是无法启动 解决办法 修 ...
- (转)在低版本的SDK里使用高版本函数@SuppressLint("NewApi") or @TargetApi?
@SuppressLint 和 @TargetApi达到的效果是一样的,相对于SuppressLint ,TargetApi会根据函数里使用的API,严格匹配SDK版本,给出编译错误,但是Suppre ...
- easyui textbox event 添加
$('#tt').textbox({ inputEvents:$.extend({},$.fn.textbox.defaults.inputEvents,{ keyup:function(e){ co ...
- IOS学习之路七(使用 Operation 异步运行任务)
在 application delegate 头文件(.h)中声明一个 operation 队列和两个 invocation operations: #import <UIKit/UIKit.h ...
- 你不知道的javascript
一.对象 JavaScript简单类型有数字.字符串.布尔值.null.undefined,其他所有的值都是对象(数组.函数.正则表达式都是对象). 数字.字符串.布尔值虽然拥有方法(包装对象),但并 ...
- Python - 获取帮助信息
1- Python Manuals 自带CHM格式的Python Manuals存放在\Python<x.x>\Doc\目录下.可以在IDLE界面下按F1键或点击help选项下Python ...
- iOS-沙盒路径总结、文件管理NSFileManager总结
// // ViewController.m // 沙盒操作 // // Created by mncong on 15/11/26. // Copyright © 2015年 mancong ...
- JAVA jdbc(数据库连接池)学习笔记(一)
学习内容: 1.JDBC的含义... JDBC想必学过JAVA的就不会陌生,JDBC到底是什么呢?其实就是由JAVA的一些类和接口构成的API,保存在java.sql和javax.sql..包中的一些 ...
- 一种感觉不太好的设置radioButton的方法
从后台传到前台,让前台的Radiobutton被选中. jquery代码: if(b_type == '') { return false; } else if($('input[name = &qu ...
- vertical-align两种应用场合
vertical-align两种应用场合 (1)用在td/th中或display:table-cell元素中:让当前元素中的文本内容在竖直方向上居中 css部分: .content{ ...