分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3、JS实现图片简单无缝轮播功效;
一、使用CSS3实现:利用animation属性
(实现一张一张的轮播,肉眼只看见一张图片)
HTML部分比较简单,两个div下包着几个img标签;为了实现无缝轮播,注意第一张图片要与最后一张图片相同;
<div class="out">
<div class="imgs">
<img src="img/beatuy.jpg"/>
<img src="img/child.jpg"/>
<img src="img/girl.jpg"/>
<img src="img/milk.jpg"/>
<img src="img/cup.jpg"/>
<img src="img/dog.jpg"/>
<img src="img/beatuy.jpg"/>
</div>
</div>
最外层div设置ovflow:hidden;position: relative;既然最外层div设置了position: relative;所以内层div需要设置position: absolute;使得其运动相对父元素而言;
CSS代码如下:
.out{
width: 200px;
height: 100px;
overflow: hidden;
position: relative;
}
.imgs{
width: 1400px;
height: 100px;
position: absolute;
animation: ppt 10s linear infinite;
} img{
float: left;
width: 200px;
height: 100px;
}
@keyframes ppt{
%{left:0px}
%{left:-250px}
%{left:-500px}
%{left:-750px}
%{left:-1000px}
%{left:-1200px}
}
这样图片就可以轮播了,但是鼠标放上去的时候图片还是一直在轮播的,如果我们想让鼠标放在图片上时,轮播停止,或者出现一些信息,我们需要加上:hover;设置动画的状态,代码很简洁:如下
.out:hover .imgs{ animation-play-state:paused }
这样我们的轮播效果就出来啦;
效果图什么的也懒得贴了;
二、使用JS实现:利用定时器setInterval
(多张图片轮播,肉眼可以看到多张图片)
同样HTML部分比较简单,需要设置外层DIV ovflow:hidden;之所以每个div既有class,也有id,是因为样式我是通过class控制的,DOM是通过ID获取的
<div class="out" id="out">
<div class="main" id='main'>
<div class="pic" id="pic">
<img src="img/0.jpg"/>
<img src="img/6.jpg"/>
<img src="img/hehua2.2.png"/>
<img src="img/tupian1.png"/>
</div>
<div class="copyPic" id="copyPic"> </div>
</div>
可以看到class="copyPic" 的DIV为空的,没有内容,不急,在JS部分会为他赋上内容,其内容与class="pic"的一样;当然我们也可以直接在HTML中为其添加内容;现在为其加上一点CSS样式吧
.out{
width: 820px;
overflow: hidden;
}
.main{
width: 1650px;
height: 100px;
}
img{
width: 200px;
height: 100px;
border:;
}
.pic,.copyPic{
float: left;
}
这样,我们的基本样式就完成了,下面就开始实现轮播效果吧:
首先,为了代码方便,先封装一个简单函数
function $(str){ return document.getElementById(str) }
然后为class="copyPic" 的DIV加上内容:
$('copyPic').innerHTML=$('pic').innerHTML;
好啦,开始写轮播函数:
function move(){
if ($('out').scrollLeft-$('copyPic').offsetWidth>=0) {
$('out').scrollLeft-=$('out').offsetWidth;
} else{
$('out').scrollLeft++;
}
}
var t=setInterval(move,10);
这样我们的图片就可以轮播啦,同样的如果希望鼠标放上去后轮播停止,还需要加上几句代码,使用鼠标事件,清除定时器
$('out').onmousemove=function(){
clearInterval(t);
}
$('out').onmouseout=function(){
t=setInterval(move,10);
}
OK,这样我们使用JS实现图片轮播的效果也就完成了!
分别用css3、JS实现图片简单的无缝轮播功效的更多相关文章
- js和jquery实现图片无缝轮播的不同写法
多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...
- 前端(十七)—— jQuery基础:jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图
jQuery的基本使用.JQ功能概括.JS对象与JQ对象转换.Ajax简单应用.轮播图 一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 j ...
- js实现图片无缝轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- 一步一步拆解一个简单的iOS轮播图(三图)
导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... ...
- 原生js实现无缝轮播
原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...
- jQuery图片无缝轮播
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- vue.js学习之better-scroll封装的轮播图初始化失败
vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
- 无缝轮播的案例 及css3无缝轮播案例
无缝轮播的案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
随机推荐
- 用PHPExcel类读取excel文件的内容
这里对PHPExcel类不做介绍,有兴趣的朋友可以自己查阅资料 在classes文件夹下有个PHPExcel.php文件,这个文件是这个类库的主要入口文件,在用之前,要引入这个类 其他的类,在此类中会 ...
- 用async 解放你的大脑
在js中,代码嵌套和代码回调非常常见,不仅编写麻烦而且异常反人类.让我等码农很是头痛 function () { function () { function () { ...
- Python 一些有趣的技巧哦!
#Python 技巧命令 python 如一股清流,可以说屌到飞起,下面咱就来看看一些屌的东西 ### python2 最简单的web服务 ` python -m SimpleHTTPServer 8 ...
- Unity 3D Framework Designing(5)——ViewModel之间如何共享数据
对于客户端应用程序而言,单页应用程序(Single Page Application)是最常见的表现形式.有经验的开发人员往往会把一个View分解多个SubView.那么,如何在多个SubView之间 ...
- RunTime 给类添加属性
RunTime网上有很多人都不知道Runtime到底是干嘛的?有很多博主都是长篇大论给他们讲这个讲那个,我感觉还不如实例来的实在.很简单的一个例子:我们都知道会有这样的需求,未读消息列表的图片上要有一 ...
- js中实现继承的几种方式
首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...
- Django后台设置--遇到的问题与解决方案
1. 后台如何管理项目中的models 新建的Django工程会自动引用admin 应用,新建后台可以通过 createsuperuser 命令建立后台admin超级管理员,我遇到的第一个问题,就是如 ...
- iOS 按钮连续提交执行一次(如留言提交,多次拍照问题)
在很多项目中暴力测试时会出现多次点击执行一个方法 可以用下面的语句进行解决 //先将未到时间执行前的任务取消. [[self class] cancelPreviousPerformRequests ...
- python无线网络安全入门案例
原文链接:http://www.devx.com/security/Article/34741 翻译:诸神的黄昏 整理校对:玄魂 --- 随着⽆线⽹络在家庭和商业中的普及,新的安全挑战是⽆法避免的.保 ...
- VB6/VBA中跟踪鼠标移出窗体控件事件(类模块成员函数指针CHooker类应用)
一.关于起因 前几天发了一篇博文,是关于获取VB类模块成员函数指针的内容(http://www.cnblogs.com/alexywt/p/5880993.html):今天我就发一下我的应用实例. V ...